js处理url中的请求参数(编码/解码)

时间:2021-01-06 09:03:16

  在处理 a 链接跳转其他页面时,总会遇到需要传递一些当前页面的信息到其他页面,然后其他页面利用这些信息进行相关操作。利用 get 请求或 hash 传递是常见的方式。

  首先,需要对传递的参数进行编码,保证数据的安全性;之后,将参数拼接到要跳转的url后,并设置为 a 链接中的 href 属性值。

var util = {
setUrlParam: function (params, targetUrl) {
var url = '';
if(params && targetUrl){
// json系列化为字符串,并编码
var enRequestParams = encodeURIComponent(JSON.stringify(params));
// get拼接
url = targeteUrl + '?rq=' + enRequestParams;
// 或hash拼接
// targeteUrl = targeteUrl + '#rq=' + enRequestParams;
}
return url;
}
}
// 假设需要传递的数据如下
var requestParams = {
'id': '1001',
'time': '2017-04-21'
};
// 要跳转的页面url
var targeteUrl = 'http://www.baidu.com'; // 获取html中id=target的a链接,并设置href
var ndTargetLink = document.querySelector('a#target');
ndTargetLink.href = util.setUrlParam(requestParams, targeteUrl);

  完成了地址拼接,接下来就是在目标页面中解析请求参数了。

var util = {
// 获取参数
getUrlParam:function(url, param) {
var reg = new RegExp(param + "=([^&]*)(&|$)");
var num = url.match(reg);
if (num != null)
return num[1];
return null;
},
// 解码,try处理多次编码的情况
decodeUrl:function(str){
str=decodeURIComponent(str);
var json=null;
try{
json=JSON.parse(str);
return json;
}catch(e){
return util.decodeUrl(str);
}
}
}
var loadPage = {
data:(function(){
var json=util.decodeUrl(util.getUrlParam(hash,'rq'));
return json;
})()
}
var data = loadPage.data;
console.log('data',data);