jq地址栏传参与接收参数

传参文件:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jq路由传参</title>
        <script src="../assets/js/jquery_2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../assets/js/jqExpand.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                $("button").click(function() {
                    var testObj = {
                        name: "xxx",
                        age: 22,
                        country: "中国"
                    }
                    // console.log(urlEncode(testObj))
                    window.location.href = "jq接收路由参数.html?" + urlEncode(testObj)
                })
            })
        </script>
    </head>
    <body>
        <button type="button">点我携带参数跳转到子页面</button>
    </body>
</html>

接收参数:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jq接收路由参数</title>
        <script src="../assets/js/jquery_2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../assets/js/jqExpand.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                var obj = GetRequest();
                // console.log(obj)
                var show = ""
                Object.keys(obj).map((key)=>{
                    console.log(obj[key])
                    show += "<p>" + obj[key] + "</p>"
                }) 
                document.write(show)
            })
        </script>
    </head>
    <body>
        
    </body>
</html>

自己封装的扩展文件(jqExpand):

/**
 * paramObj 将要转为URL参数字符串的对象
 * key URL参数字符串的前缀
 * encode true/false 是否进行URL编码,默认为true
 * js实现
 * return URL参数字符串
 */
var urlEncode = function(paramObj, key, encode) {
    if (paramObj == null) return '';
    var paramStr = '';
    var t = typeof(paramObj);
    if (t == 'string' || t == 'number' || t == 'boolean') {
        paramStr += '&' + key + '=' + ((encode == null || encode) ? encodeURIComponent(paramObj) : paramObj);
    } else {
        for (var i in paramObj) {
            var k = key == null ? i : key + (paramObj instanceof Array ? '[' + i + ']' : '.' + i);
            paramStr += urlEncode(paramObj[i], k, encode);
        }
        // console.log(paramStr)
        paramStr = paramStr.replace(/^&/g, "")
    }
    return paramStr;
};

//根据参数名称获取url参数
function getUrlParamValue(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return decodeURIComponent(r[2]);
    return null;
}


//获取url参数封装成对象
function GetRequest() {
    var url = location.search; //获取url中"?"符后的字串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = decodeURIComponent((strs[i].split("=")[1]));
        }
    }
    return theRequest;
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容