美文网首页Python Web开发学习
JavaScript获取url中的参数和锚点,用于提交成功后跳转

JavaScript获取url中的参数和锚点,用于提交成功后跳转

作者: 吾星喵 | 来源:发表于2018-12-27 17:59 被阅读1次

    js获取url中的参数值

    使用场景:

    • 当我访问 http://127.0.0.1:8000//problem/category/2/#anchor_point_4 想对anchor_point_4这个锚点的内容进行修改,
    • 那么需要访问http://127.0.0.1:8000/problem/edit/question/4/
    • 我们在后面添加next参数,用于修改成功后跳转来,修改的链接就变成了 http://127.0.0.1:8000/problem/edit/question/4/?next=/problem/category/2/#anchor_point_4
    • 使用ajax提交修改,如果成功,现货区到next和锚点,然后通过window.location.href='/problem/category/2/#anchor_point_4',在前端实现跳转

    Location 对象包含有关当前 URL 的信息。

    window.location 属性

    Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。

    属性 描述
    hash 设置或返回从井号 (#) 开始的 URL(锚)
    host 设置或返回主机名和当前 URL 的端口号。
    hostname 设置或返回当前 URL 的主机名
    href 设置或返回完整的 URL
    pathname 设置或返回当前 URL 的路径部分
    port 设置或返回当前 URL 的端口号
    protocol 设置或返回当前 URL 的协议
    search 设置或返回从问号 (?) 开始的 URL(查询部分)

    获取url参数

    // 采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!)
    
    function getParameterValues(name)
    {
         var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
         var r = window.location.search.substr(1).match(reg);//search,查询?后面的参数,并匹配正则
         if(r!=null)return  unescape(r[2]); return null;
    }
    
    // 调用方法
    alert(getParameterValues("参数名1"));
    alert(getParameterValues("参数名2"));
    alert(getParameterValues("参数名3"));
    
    
    

    若地址栏URL为:http://127.0.0.1:8000/problem/edit/question/4/?next=/problem/category/2/#anchor_point_4

    那么调用:alert(getParameterValues("next"));

    则会弹出一个对话框:内容就是 /problem/category/2/

    如果没有参数,调用会出错,加一个判断请求的参数是否为空,首先把值赋给一个变量:

    var next = getParameterValues("next");
    if(next !=null && next.toString().length>1)
    {
       alert(getParameterValues("next"));
    }
    

    这样就不会报错了!

    下一跳加锚点跳转

    通过这样写,就可以使用next和锚点来跳转到其他地址

    window.location.href = getParameterValues('next') + window.location.hash;
    

    相关文章

      网友评论

        本文标题:JavaScript获取url中的参数和锚点,用于提交成功后跳转

        本文链接:https://www.haomeiwen.com/subject/lrjdlqtx.html