ajax请求路径的动态获得

首先在各位阅读本篇博客之前先声明一下，因为我的代码功底还不是很好，所以写出来的代码会比较零散，没有严谨的逻辑，如果各位大佬发现了什么需要修改的地方，欢迎各位大佬批评指教（抱拳）

首先上代码：

HTML部分：

<div class="left-menu-3">
                        <div class="left-menu-third"><a id="111" href="#pig_information.html">猪只资料</a></div>
                        <div class="left-menu-third"><a href="#sow_production.html">母猪生产</a></div>
                        <div class="left-menu-third"><a href="#">种猪转舍</a></div>
                        <div class="left-menu-third"><a href="#">种猪进场</a></div>
                        <div class="left-menu-third"><a href="#">种猪离场</a></div>
                        <div class="left-menu-third"><a href="#">后备情期</a></div>
                        <div class="left-menu-third"><a href="#">母猪体况</a></div>
                        <div class="left-menu-third"><a href="#">公猪管理</a></div>
 </div>

因为比较懒，所以只写了两个加载的页面，望各位见谅（抱拳）

        a标签的href属性值在前面加一个＃符是因为如果不添加的话当点击a标签时就会跳转到相应的页面，而如果在前面添加一个＃符页面跳转就失效啦，我感觉大多数人在写一个标签但不跳转页面时HREF的值都喜欢用＃（反正我是这样的），但是这样就会造成页面重新跳转到页头，其实可以使用##，这样也会有一个标签的效果，页面也不会跳转到页头啦

CSS部分：

.left-menu-3{
    display: none;
    background:rgb(41,128,189) ;
    width: 100%;
}
.left-menu-third{
    color: white;
    height: 30px;
    line-height: 30px;
    width: 37%;
    background: rgb(41,128,189);
    text-align: left;
    margin-left: 87px;
}
.left-menu-third a{
    color: white;
    text-decoration: none;
    transition: all 0.2s linear;
}
.left-menu-third:hover a{
    text-decoration: none;
    color:rgb(241,179,63);
}

JS部分：

var pageName
    $(".left-menu-third").on('click','a',function () {
        pageName = $(this).attr("href").substr(1);
        console.log(pageName);
    });


function uploadPage() {
        $.ajax({
            url:"https://heidongbuhei.github.io/test/pages/"+pageName,
            type:"get",
            data:{},
            async:true,
            dataType:"html",
            beforeSend:function(){
                $(".loading-box").show();
            },
            complete:function(){
                $(".loading-box").hide();
            },
            success:function (data) {
                console.log(data);
                $(".change-part").html(data);

            },
            error:function (data) {
                console.log(data.status);
            }
        })
    }

对于ajax的请求路径，我是用JQuery的attr()函数获取了href的属性值，然后用正则表达式的substr()函数截取从字符串[1]开始的所有字符，这样就抛弃掉了#符，获得了所要访问页面的名称。而页面的名称就保存在pageName这个变量中，每点击一次，pageName的值都会发生改变

然后在通过在ajax的url中预先设好部分请求路径，在通过添加pageName这个变量就可以得到访问的路径了