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

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

  1. var util = {
  2. setUrlParam: function (params, targetUrl) {
  3. var url = '';
  4. if(params && targetUrl){
  5. // json系列化为字符串,并编码
  6. var enRequestParams = encodeURIComponent(JSON.stringify(params));
  7. // get拼接
  8. url = targeteUrl + '?rq=' + enRequestParams;
  9. // 或hash拼接
  10. // targeteUrl = targeteUrl + '#rq=' + enRequestParams;
  11. }
  12. return url;
  13. }
  14. }
  15. // 假设需要传递的数据如下
  16. var requestParams = {
  17. 'id': '1001',
  18. 'time': '2017-04-21'
  19. };
  20. // 要跳转的页面url
  21. var targeteUrl = 'http://www.baidu.com';
  22.  
  23. // 获取html中id=target的a链接,并设置href
  24. var ndTargetLink = document.querySelector('a#target');
  25. ndTargetLink.href = util.setUrlParam(requestParams, targeteUrl);

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

  1. var util = {
  2. // 获取参数
  3. getUrlParam:function(url, param) {
  4. var reg = new RegExp(param + "=([^&]*)(&|$)");
  5. var num = url.match(reg);
  6. if (num != null)
  7. return num[1];
  8. return null;
  9. },
  10. // 解码,try处理多次编码的情况
  11. decodeUrl:function(str){
  12. str=decodeURIComponent(str);
  13. var json=null;
  14. try{
  15. json=JSON.parse(str);
  16. return json;
  17. }catch(e){
  18. return util.decodeUrl(str);
  19. }
  20. }
  21. }
  22. var loadPage = {
  23. data:(function(){
  24. var json=util.decodeUrl(util.getUrlParam(hash,'rq'));
  25. return json;
  26. })()
  27. }
  28. var data = loadPage.data;
  29. console.log('data',data);

 

js处理url中的请求参数(编码/解码)的更多相关文章

  1. js的url中传递中文参数乱码,如何获取url中参数问题

    一:Js的Url中传递中文参数乱码问题,重点:encodeURI编码,decodeURI解码: 1.传参页面Javascript代码: <script type=”text/javascript ...

  2. Js的Url中传递中文参数乱码的解决

    一:Js的Url中传递中文参数乱码问题,重点:encodeURI编码,decodeURI解码: 1.传参页面Javascript代码: 2. 接收参数页面:test02.html 二:如何获取Url& ...

  3. js获取url中的中文参数出现乱码

    解决方法 function getQueryString(key){ var reg = new RegExp("(^|&)"+key+"=([^&]*) ...

  4. 关于使用JS去除URL中的指定参数问题,js 对url进行某个参数的删除,并返回url

    在网页上找了半天,发现现在的资源实在是少的可怜,而前端尤甚.所以没办法,于是自己花了一些时间写了一个: 1 /** 2 * 删除URL中的指定参数 3 * @param {*} url 4 * @pa ...

  5. JS获取Url中传入的参数

    一:后台获取,前台调用 后台: object value= Request.QueryString[key]; 前台js: $(function(){ var value="<%=va ...

  6. node.js获取url中的各个参数

    实例代码test.js var http=require('http'); var url=require('url'); var querystring=require('querystring') ...

  7. JS获取url中的指定参数

    function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new O ...

  8. 使用js获取url中的get参数并转成json格式

    写在前面的 没啥说的 上代码 思路就是先获取到?后面的参数区,然后 利用字符串转数组方法获取到各个参数 var json = {}; var url = 'https://www.baidu.com/ ...

  9. javascript从url中获取请求参数

    function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)( ...

随机推荐

  1. Executor(一)ExecutorService 线程池

    Executor(一)ExecutorService 线程池 本篇主要涉及到的是 java.util.concurrent 包中的 ExecutorService.ExecutorService 就是 ...

  2. 8个设计师必看的免费UI图标设计资源站

    图标是我们日常APP及网页设计过程中必不可少的元素之一,通过小小的图标,可以快速方便的实现视觉引导和功能划分.在创作时,我们需要寻找各种各样的图标来满足自己的设计需求,非常浪费时间和精力.今天,小编给 ...

  3. part1:4-linux快速体验

    1.Linux部分目录结构介绍 /:根目录,一般根目录下只存放目录,尽量不要存放文件:/etc./bin./dev./lib./sbin应该和根目录放置在一个分区中. /bin:可执行二进制文件目录, ...

  4. 为什么const对象只能调用const成员函数,而不能调用非const成员函数?

    在c++中,我们可以用const来定义一个const对象,const对象是不可以调用类中的非const成员函数,这是为什么呢?下面是我总结的一些原理. 假设有一个类,名字为test代码如下: clas ...

  5. 20155213 2016-2017-2 《Java程序设计》第八周学习总结

    20155213 2016-2017-2 <Java程序设计>第八周学习总结 教材学习内容总结 第十四章NIO与NIO2 NIO NIO使用频道来衔接数据节点,在处理数据时,NIO可以让你 ...

  6. hdu-1050(贪心+模拟)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1050 思路:由图可知,1对应2,3对应4,以此类推,如果x,y是偶数则变为奇数: 每次输入两个区间,找 ...

  7. [转载][翻译]Go的50坑:新Golang开发者要注意的陷阱、技巧和常见错误[2]

    Golang作为一个略古怪而新的语言,有自己一套特色和哲学.从其他语言转来的开发者在刚接触到的时候往往大吃苦头,我也不例外.这篇文章很细致地介绍了Golang的一些常见坑点,读完全篇中枪好多次.故将其 ...

  8. UVa 1572 Self-Assembly (构造+拓扑排序。。。。。)

    题意:给定n个带标号的正方形,标号要么是一个大写字母加一个+或-,要么是00, 当且仅当大写字母相同并且符号相反时可以连接,问你给定的能不能拼成一个无限大的的东西. 析:说实话,真心没有看出来是拓扑排 ...

  9. VHDL的库

    STD_LOGIC_ARITH 扩展了UNSIGNED.SIGNED.SMALL_INT(短整型)三个数据类型,并定义了相关的算术运算和转换函数. --======================== ...

  10. python-optparse模块给脚本增加参数选项

    import optparse parser = optparse.OptionParser('[-] Usage %prog '+ '-H <RHOST[s]> -l [-p -F ]' ...