这次页面之间的传值是升级版本，为什么是升级版本呢，因为这次页面的传值不一样了。大家可以看一下我原来的文章《关于获取URL中传值的解决方法》

　　其实上次就已经比较清楚的介绍了页面之间的传值，但是这次要传输的是一个数组，或者是一个JSON字符串。这次就不太一样了。首先我们来看页面index1.html,这个页面需要向index2.html中传输一个数组。而且里面还含有中文信息。先看index1.html中的内容吧：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>页面一</title>

     </head>

     <body>

         <div>页面一</div>

     </body>

     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

     <script type="text/javascript">

 //        var arr={"a":{

 //            "id":1,

 //            "name":"标签一"

 //        },"b":{

 //            "id":2,

 //            "name":"标签二"

 //        },"c":{

 //            "id":3,

 //            "name":"标签三"

 //        }};

 var arr=[{"id":1,"name":"标签"}

 ]

 //        console.log(arr);

 //        console.log(JSON.stringify(arr))

 //        console.log(encodeURI(JSON.stringify(arr)))

 //        console.log(JSON.parse(decodeURI(encodeURI(JSON.stringify(arr)))));

         $('div').click(function(){

             window.location.replace('./index2.html?data='+encodeURI(encodeURI(JSON.stringify(arr))));

         })

     </script>

 </html>

这里就是最简单的点击一个按钮，然后跳转到index2.html中，我们看到这里声明的arr数组，是要传输的。我们首先是利用JSON.stringify()的方法，让他变成一个字符串，然后利用两次encodeURI()让他能在地址栏正确的传输，如果arr中不包含中文的话，其实是可以只用一次encodeURI()的。

http://192.168.18.4:8020/%E9%A1%B5%E9%9D%A2%E4%B9%8B%E9%97%B4%E7%9A%84%E4%BC%A0%E5%80%BC/index2.html?data=%255B%257B%2522id%2522:1,%2522name%2522:%2522%25E6%25A0%2587%25E7%25AD%25BE%2522%257D%255D

这就是我点击页面跳转到index2.html的时候，地址栏的显示。

再来看一下我们的index2.html页面的内容；

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>页面二</title>

     </head>

     <body>

         <div>页面二</div>

     </body>

     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

     <script type="text/javascript">

         function geturl(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;

         };

         var arr = geturl('data');

         var arr1 = JSON.parse(decodeURI(decodeURI(arr)));

         var name = arr1[0].name;

         console.log(decodeURI(name))

         console.log(arr1)

     </script>

 </html>

这里面的geturl（）在上个函数中已经讲解过了，主要的是我们看一下第19行，首先我们是两次decodeURI（）,然后是JSON.parse();这个时候就是我们能得到的数组了。然后就可以任意使用了。

　　其实这里跟上次的是差不多的，只是多了加密和格式化的，需要注意的是，加密和格式化的先后顺序，要不然是不能正确的解析这个需要传输的数组的。

关于获取URL中传值的解决方法--升级版的更多相关文章

  1. 关于获取URL中传值的解决方法

    在我们页面的URL中包含着很多信息,包括域名,协议等等这里就不一一介绍了),对于我们开发者而言,使用比较多的就是页面之间的传值.为什么要页面传值呢?很简单,当你在浏览一个商品页面的时候你要看到一个商品 ...

  2. tomcat下获取当前路径的url中含有空格解决方法

    参考博文(http://www.360doc.com/content/11/1009/17/4602013_154657565.shtml) web项目发布到Tomcat之后,如果tomcat是安装在 ...

  3. js获取url中的参数(解决中文乱码)

    这个是封装好的方法: function getQueryString(name) { var reg = new RegExp("(^|&)" + name + " ...

  4. javascript获取url中对应参数的方法

    利用正则表达式和location.search方法,可以简便的获取到对应的参数:   function getQueryString(name) {var reg = new RegExp(" ...

  5. iOS 的url中含有中文解决方法

    [NSURLURLWithString:urlString]生成URL对象时,iOS客户端不能正确进行网络请求,网上找到的URLEncode方法又不能完全解决问题. 方法1: NSString* en ...

  6. js获取url中的参数,并保证获取到的参数不乱码

    //网上比较经典的js获取url中的参数的方法 function getQueryString(name) { var reg = new RegExp("(^|&)" + ...

  7. APPCAN开发笔记：html页面之间的参数传递：使用js获取url中的参数，以及在APPCAN中不能使用的解决方法

    用PHP的GET/POST方式来传递方式已经是司空见惯了,但是如果我的页面是一个静态的html的页面,想传递参数的时候要怎么办呢?在APPCAN的开发中我们会经常遇到这样的问题,因为所有的页面都是静态 ...

  8. 记录一次bug解决过程：velocity中获取url中的参数

    一.总结 在Webx的Velocity中获取url中参数:$rundata.getRequest().getParameter('userId') 在Webx项目中,防止CSRF攻击(Cross-si ...

  9. JS获取URL中参数值（QueryString）的4种方法分享<转>

    方法一:正则法 复制代码代码如下: function getQueryString(name) {    var reg = new RegExp('(^|&)' + name + '=([^ ...

随机推荐

  1. 【.NET异步编程系列1】：await&async语法糖让异步编程如鱼得水

    前导 Asynchronous programming Model(APM)异步编程模型以BeginMethod(...) 和 EndMethod(...)结对出现. IAsyncResult Beg ...

  2. pods "xxx" is forbidden: SecurityContext.RunAsUser is forbidden

    报错信息如下: pods "k8s-logs-cndf5" is forbidden: SecurityContext.RunAsUser is forbidden 解决方法: 需 ...

  3. 学习 JavaScript （四）核心概念：操作符

    JavaScript 的核心概念主要由语法.变量.数据类型.操作符.语句.函数组成,前面三个上一篇文章已经讲解完了.后面三个内容超级多,这篇文章主要讲解的是操作符. 操作符 什么叫做操作符? 这是一种 ...

  4. 强化学习(十三) 策略梯度(Policy Gradient)

    在前面讲到的DQN系列强化学习算法中,我们主要对价值函数进行了近似表示,基于价值来学习.这种Value Based强化学习方法在很多领域都得到比较好的应用,但是Value Based强化学习方法也有很 ...

  5. windows,分割路径.得出目录

    #include <windows.h> #include <vector> #include <stdio.h> #include <string> ...

  6. 如何在MySQL中查询每个分组的前几名【转】

    问题 在工作中常会遇到将数据分组排序的问题,如在考试成绩中,找出每个班级的前五名等. 在orcale等数据库中可以使用partition语句来解决,但在mysql中就比较麻烦了.这次翻译的文章就是专门 ...

  7. 第14章 纪元时间转换 - IdentityModel 中文文档(v1.0.0)

    JWT令牌使用所谓的Epoch或Unix时间来表示日期/时间. IdentityModel包含用于DateTime和DateTimeOffset转换到/来自Unix时间的扩展方法: var dt = ...

  8. python 生成 1900-2100 的二十四节气文件

    [学习笔记] 转载 #!/usr/bin/python3.7# -*- coding:utf-8 -*- '''整体思路1:根据公式算出节气日期 1900 年到 2100  200 年的时间2:特殊的 ...

  9. vue 中使用sass实现主体换肤

    有如下代码要实现换肤功能 <template> <div class="app-root" :class="themeClass"> & ...

  10. SQL Server 数据库部分常用语句小结（三）

    21.SQL运行Log的读取 .EXEC xp_readerrorlog 0,1,null,null,'开始时间','结束时间' 22. Alwayson 状况及传输情况监控 SELECT ar.re ...