前端的第一个页面传值第二个页面如何接收?

问题遇到的现象和发生背景

本人刚开始写前端,目前用的是layui的框架,有一个不是特别明白
现在有一个需求,前一个页面的id需要传入后一个页面的按钮中,前一个页面已经传参过去了,后面一个页面如何接收呢?

img

img

img

有两种方法,一种是通过url传值,另一种放在请求域中,通过attribute传值

你说的就是这个吧,主要是第二个页面如何接收这个值呢

img

用url参数.,参考代码
前一页面

var id = "345";
url = 'xxxxxxx.html?id='+id;
location.href = url;

后一页面xxxxxxx.html

var request = (function (){
    var obj = {};
    var arr = window.location.search.slice(1).split("&");
    for (var i = 0, len = arr.length; i < len; i++) {
        var nv = arr[i].split("=");
        obj[decodeURIComponent(nv[0]).toLowerCase()] = decodeURIComponent(nv[1]);
    }
    return obj;    
})();

alert(request['id']);

第一页. html? id=345

第二页获取到URL截取id

<a href="javascript:" title="分配按钮" lay-event="fenpei">分配按钮</a>

table.on("tool(tableFilter)", function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case "fenpei":
                    fenpei(data);
                    break;
                case "del":
                    del(data);
                    break;
            }
        });
function fenpei(data) {
    layer.confirm('您确定要分配任务吗?',{btn: ['确定', '取消'],title:"提示"}, function(){
        layer.open({
          type: 2, 
          content: 'fenpei.html?id='+data.id //给静态页面传递id,data.id获取id,是你table表格里的那个 field 的字段
        }); 
    });
}

然后到:
fenpei.html页面可以这样获取:

function getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    }

然后通过 let dataid = getQueryString('id'); 获取传递过来的id
然后进行赋值到你需要的地方
比如
一个隐藏域:
<input type="hidden" name="id" id="id" value="" lay-verify="required">
可以通过
$("#id").val(dataid );

可以通过url传参,然后在另一个页面获取传递的参数即可

用 layer.open 打开新页面 然后在content中 url后面通过 ?id=345 传递过去

可以先存到 LocalStorage里读完了再删掉(不算是什么主流的方法但是可以解决)

可以放vuex中或本地

我用的也是layui框架,我是这样写的:

function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURI(r[2]); return null;
}

运用超连接!

跳转前页面传递:
利用问号url传值(为保证数据安全这里可以加入btoa加密或其他可逆加密手法)

window.location.href="result.html?id="+id;
1
跳转后页面接收:

利用分割url字符串来获得传递内容.(如若传递的时候进行了加密,这里需要解密)

var id=decodeURIComponent(location.search.slice(1).split("=")[1]);
1
也可以考虑使用localStorage传值 但是会受到浏览器限制.