前端javascript获取url参数

最新推荐文章于 2024-09-11 21:58:02 发布

月下抽风

最新推荐文章于 2024-09-11 21:58:02 发布

阅读量3.8k

点赞数 3

分类专栏： Javascript

本文链接：https://blog.csdn.net/listennerBGM/article/details/91045805

版权

Javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

当页面跳转没有后台参与时，页面之间的数据该如何共享。比如下面一个场景
页面A.html有如下标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <a href="B.html?name=张三&age=25">跳转到B页面</a>
</body>
</html>

在这里插入图片描述

页面B.html该如何获取这里的name和age，以前是aspx页面，有后台控制的，有专门的函数直接拿到A页面传过来的参数。如VB的context.Request(“name”)，C#的context.Request.Form[“name”],context.Request.queryString[“name”]，一个拿post请求的，一个拿get请求的。这里没有后台参与，那么该怎么拿。就该javascript发挥作用了，javascript本身是没有封装直接获取参数的方法的。为了便于理解和方便，笔者在这里也不做封装处理。仅做一些基本的校验。

页面B.html代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <!--这个标签用来显示传递过来的参数-->
    <div id="showParam"></div>
    <script type="text/javascript">
        var paramobj = {};
        window.onload = function () {
            //此时parameterURL为:name=张三&age=25
            var parameterURL = location.search.substring(1, location.search.length);
            //此时paramArr为一个数组:["name=张三","age=25"]
            var paramArr = parameterURL.split("&");
            var key,value,temp;
            //定义2个变量接收key，value并存到paramobj中
            for (i = 0; i < paramArr.length; i++) {
                temp = paramArr[i].split("=");
                if (temp.length === 1) {
                    paramobj[temp[0]] = "";
                }
                else if(temp.length>1){
                    for (j = 0; j < temp.length; j++) {
                        paramobj[temp[0]] = decodeURIComponent(temp[1]);
                    }
                }
            }
            //此时参数已全部保存至paramobj中,这里显示到div
            var showStr="";
            for (var a in paramobj) {
                showStr += (a + ":" + paramobj[a]);
            }
            document.getElementById("showParam").innerText = showStr;
        }
    </script>
</body>
</html>

在这里插入图片描述

接下来对该函数进行封装,通过简单的函数调用的方式:函数名(参数名)即可获取参数值

function getParameterURL(str){
    var parameterURL = location.search.substring(1, location.search.length);
    var paramArr = parameterURL.split("&");
    var key,value,temp;
    var paramobj = {};

    for (i = 0; i < paramArr.length; i++) {
        temp = paramArr[i].split("=");
        if (temp.length === 1) {
            paramobj[temp[0]] = "";
        }
        else if(temp.length>1){
            for (j = 0; j < temp.length; j++) {
                paramobj[temp[0]] = decodeURIComponent(temp[1]);
            }
        }
    }
    
    //如果参数名不存在,函数会返回undefined,尽量不要让函数返回undefined,让其返回空字符串
    return paramobj[str]==undefined?"":paramobj[str];
}