jq地址栏传参与接收参数

作者: 前端勾魂师 | 来源:发表于2020-05-07 13:22 被阅读0次

jq地址栏传参与接收参数
关于跳转get传参
Restful风格
路由传参
Axios —— delete
vue-router query和params传参(接收参数)，
vue-router query和params传参(接收参数)r
12、vue-router query和params传参$rou
React 路由传参的三种方式
jQuery中eq和get方法

传参文件：

<!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;
}