在处理 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'};// 要跳转的页面urlvar targeteUrl = 'http://www.baidu.com';// 获取html中id=target的a链接,并设置hrefvar 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);