这次页面之间的传值是升级版本，为什么是升级版本呢，因为这次页面的传值不一样了。大家可以看一下我原来的文章《关于获取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. 死磕 java集合之ConcurrentLinkedQueue源码分析

    问题 (1)ConcurrentLinkedQueue是阻塞队列吗? (2)ConcurrentLinkedQueue如何保证并发安全? (3)ConcurrentLinkedQueue能用于线程池吗 ...

  2. 基于udp的套接字编程

    一,简单明了了解udp套接字编程 客户端: #Author : Kelvin #Date : 2019/1/30 11:07 from socket import * ip_conf=("1 ...

  3. SpringSecurityOauth RCE (CVE-2016-4977) 分析与复现

    目录 0x00 前言 0x01 调试分析 0x02 补丁分析 0x03 参考 影响版本: 2.0.0-2.0.9 1.0.0-1.0.5 0x00 前言 这个漏洞与之前那个SpringBoot的SpE ...

  4. 第5章 令牌自省端点(Token Introspection Endpoint) - IdentityModel 中文文档(v1.0.0)

    OAuth 2.0令牌自省的客户端库是作为HttpClient扩展方法提供的. 以下代码将引用令牌发送到内省端点: var client = new HttpClient(); var respons ...

  5. 学习python的第四天

    4.29自我总结 一.Jupyter的安装以及运行 1.Jupyter的安装 运行CMD,在CMD中输入pip3 --default-timeout=100 install -U jupyter 再输 ...

  6. 安卓4.0以上系统怎么不用root激活XPOSED框架的方法

    在大多单位的引流或业务操作中,基本上都需要使用安卓的高端技术Xposed框架,近期,我们单位购买了一批新的安卓4.0以上系统,基本上都都是基于7.0以上版本,基本上都不能够刷入root超级权限,即便是 ...

  7. Git：四、连接GitHub远程仓库

    1.拥有一个GitHub网站的账号 2.创建SSH Key 打开终端(Windows打开Git Bash),输入: ssh-keygen -t rsa -C "youremail@??.co ...

  8. Win10常见问题记录

    基本信息 记录我在使用win10过程中遇到的一些问题 我所使用的两个win10系统 Win10 企业版 1607(家里电脑) Win10 专业版 1806(公司电脑) win10 开启Sets 请问您 ...

  9. Luogu P5279 [ZJOI2019]麻将

    ZJOI2019神题,间接送我退役的神题233 考场上由于T2写挂去写爆搜的时候已经没多少时间了,所以就写挂了233 这里不多废话直接开始讲正解吧,我们把算法分成两部分 1.建一个"胡牌自动 ...

  10. js随机背景颜色

    // 要求: 随机生成颜色RGB 核心点 :(0,0,0) rgb 每一组的数字取值范围是 0~255 // 需要随机生成 0~255 之间的整数 function getRandom(min, ma ...