杭州网站建设提供商,基于wed的网站开发,哈尔滨寸金网站建设价格,三网合一网站 东莞目录
首先了解一下正常传递基本数据类型
JavaScript跳转页面方法
JavaScript路由传递参数
JavaScript路由接收参数传递对象、数组 在前端有的时候会需要用链接进行传递参数#xff0c;基本数据类型的传递还是比较简单的#xff0c;但是如果要传递引用数据类型就比较麻烦了…目录
首先了解一下正常传递基本数据类型
JavaScript跳转页面方法
JavaScript路由传递参数
JavaScript路由接收参数传递对象、数组 在前端有的时候会需要用链接进行传递参数基本数据类型的传递还是比较简单的但是如果要传递引用数据类型就比较麻烦了虽然使用sessionStorage或者localStorage也可以实现页面传参但是如果是多端进行传参就不能够实现了比如说在pc端的一个页面生成了一个二维码需要手机端去打开浏览但是手机进入可能会需要向后台请求数据这个时候就会用到参数下面给大家分享一个页面之间传递引用数据类型的方法这个也是可以实现二维码传参的 首先了解一下正常传递基本数据类型 跳转传参是指在页面跳转时将部分数据拼接到URL路径上一并跳转到另一个页面上这里要注意拼接返回的会是字符串的形式
JavaScript 跳转页面方法
window.location.href http://www.baidu.com; // 通过改变location.href来实现页面跳转 常用
window.location.replace(http://www.baidu.com); // 通过location.replace替换当前页面路径来实现页面跳转
window.location.assign(http://www.baidu.com); // 通过location.assign加载新文档来实现页面跳转注意区别 href是在当前页面进行跳转浏览器的后退按钮还是可以点击的 replace则是将当前页面的路径进行了替换浏览器的后退按钮不会在生效 使用location.assign()方法传递的URL必须是绝对路径否则会导致页面无法重定向的情况而且在IE8以下版本中如果URL的长度超过了2083个字符调用location.assign()方法将会失败在一些浏览器中如果在页面加载完成后对location.assign()进行调用可能会导致页面闪烁现象
JavaScript 路由传递参数
使用路由传参可以参考了解浏览器的地址链接‘?’ 后边的就是参数多个参数用 ‘’ 分割
// 单传值
window.location.href http://www.baidu.com?1;
window.location.replace(http://www.baidu.com?1);
window.location.assign(http://www.baidu.com?1);
// 传键值对
window.location.href http://www.baidu.com?id1;
window.location.replace(http://www.baidu.com?id1);
window.location.assign(http://www.baidu.com?id1);
// 多个参数
window.location.href http://www.baidu.com?id1valueasdf;
window.location.replace(http://www.baidu.com?id1valueasdf);
window.location.assign(http://www.baidu.com?id1valueasdf);这些只是简单的数据类型如果需要传递引用数据类型或者数据中存在汉字需要先使用JSON.stringify() 方法将数据进行转换
let str 张三;
let json_str JSON.stringify(str);// 转换为json格式
//
window.location.href encodeURL(http://www.baidu.com?id1value json_str);
//
window.location.replace(encodeURL(http://www.baidu.com?id1value json_str));
//
window.location.assign(encodeURL(http://www.baidu.com?id1value json_str));JavaScript 路由接收参数
let str window.location.search; //获取链接中传递的参数
let params str.substring(str.indexOf() 1);
dataJson JSON.parse(decodeURI(params));
console.log(dataJson :, dataJson);// 或者
let data new URLSearchParams(window.location.search);
console.log(JSON.parse(data.get(id)));
console.log(JSON.parse(data.get(value)));这里推荐使用第二种方法更为简便
传递对象、数组
上边已经将方法说明过了下面的是示例 页面跳转demo
let arr {name: zz,sex: 男,age: 11
}
let datajson JSON.stringify(arr);
// 跳转页面这里需要大家自己将页面路径进行修改
window.location.href encodeURI(accept.html?datajson datajson);接收参数demo
let dataJson;
let str window.location.search; //获取链接中传递的参数
let arr str.substring(str.indexOf() 1);
dataJson $.parseJSON(decodeURI(arr));
console.log(dataJson :, dataJson);
// 或者let data new URLSearchParams(window.location.search);
console.log(JSON.parse(data.get(datajson)));
