zhaozhuang1210

1、通过url传值

A页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A page</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script>
        $(document).ready(function () {
            // 拼接跳转url中要传输的数据
            var dataList = [];
            var dataStr;
            dataList.push(\'name\');//name、password为要传递的参数
            dataList.push(\'password\');
            dataStr = window.JSON.stringify(dataList);

            $(\'#aPage\').on(\'click\', function () {
                console.log(dataStr)
                $(\'#aPage\').attr("href", "b.html?data=" + dataStr);
            })
        });
    </script>
</head>
<body>
<a href="b.html" id="aPage">在url里带数据跳转到b页面</a>
</body>
</html>

注意:JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

B页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>B page</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script>
        $(document).ready(function () {
            //使用正则表达式获取url中的参数
            function getUrlParam(name) {
                //构造一个含有目标参数的正则表达式对象
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                //匹配目标参数,window.location.search获取页面url
                var r = window.location.search.substr(1).match(reg);
                //返回参数值
                if (r != null) {
                    return unescape(r[2]);
                }
                alert("出错了!");
            }

            var urlData = getUrlParam(\'data\');
            // 将数据填充到input框里面
            $(\'#getUrlData\').val(urlData);
        });
    </script>
</head>
<body>
<input type="text" id="getUrlData">
</body>
</html>

注意:

1、window.location.search.substr(1).match(reg);

(1) location是包含了相关的url的信息,它是windown的一部分。

(2) search是一个可以查询的属性,可以查询?之后的部分。

(3) substr(1)是为了去掉第一个?

(4) match()是你要匹配的部分 后面可以是正则表达式。

(5) return unescpe(r[2]) 返回的值 一个数组。

(6) 这里是开始匹配,找到了返回对应url值,没找到返回null。

此方法不足之处:

1、URL传递参数长度受限,最大为2K。

2、URL只能传递字符型参数,不能传递中文。

3、容易导致信息泄露,重要信息需要加密后才能传递。

2、通过浏览器cookie传值

3、通过form表单传值

分类:

技术点:

相关文章: