这次页面之间的传值是升级版本，为什么是升级版本呢，因为这次页面的传值不一样了。大家可以看一下我原来的文章《关于获取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. 百度推出 MIP Baidu Path链接

    在站长将站点 MIP 化时,需要关注 URL 的一共有三个:MIP URL, MIP-Cache URL 以及 MIP Baidu Path. 从 URL 说起 在互联网中,URL 定义页面的地址,每 ...

  2. tomcat部署服务乱码问题

    first:win+R -->输入regedit 打开注册列表HKEY_CURRENT_USER-->Console-->Tomcat-->CodePage修改成十进制6500 ...

  3. Unity 用ml-agents机器学习造个游戏AI吧(2)(入门DEMO)

    前言: 上一篇博文已经介绍了Unity ml-agents的环境配置(https://www.cnblogs.com/KillerAery/p/10629963.html)了. 个人建议先敲demo再 ...

  4. CopyOnWriteArrayList你都不知道，怎么拿offer？

    前言 只有光头才能变强 前一阵子写过一篇COW(Copy On Write)文章,结果阅读量很低啊...COW奶牛!Copy On Write机制了解一下 可能大家对这个技术比较陌生吧,但这项技术是挺 ...

  5. eclipse中运行出错:无法初始化主类的解决办法

    问题描述:eclipse中运行程序时,出现如下错误 解决办法: 出现此类:无法初始化主类有可能是因为eclipse中Java的版本与JDK的版本不匹配,我开始用的时候eclipse中用的是Java s ...

  6. [ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式

    [官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-popuptemplate/index.html] 一. ...

  7. Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明

    前言 上一篇文章我们搭建好了 Flutter 的开发环境. Flutter 即学即用--01 环境搭建 这一篇我们通过 Flutter 的一个 Demo 来了解下 Flutter. 开发系统:MAC ...

  8. 在线修改redo日志大小

    注意点:1.redo要是能sesize的话就完美了2.drop时候如果active就得checkpoint才能drop3.物理删除旧redo文件redo大小影响切换,进而影响性能,至于什么样的业务设置 ...

  9. Windows -- cmd命令: ipconfig 和 nbtstat

    1. ipconfig 命令格式及参数如下: 2. nbtstat 命令格式及参数如下:

  10. 【RL-TCPnet网络教程】第39章 RL-TCPnet之TFTP服务器

    第39章     RL-TCPnet之TFTP服务器 本章节为大家讲解RL-TCPnet的TFTP服务器应用,学习本章节前,务必要优先学习第38章的TFTP基础知识.有了这些基础知识之后,再搞本章节会 ...