这次页面之间的传值是升级版本，为什么是升级版本呢，因为这次页面的传值不一样了。大家可以看一下我原来的文章《关于获取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基础(六)-----String性质深入解析

    本文将讲解String的几个性质. 一.String的不可变性 对于初学者来说,很容易误认为String对象是可以改变的,特别是+链接时,对象似乎真的改变了.然而,String对象一经创建就不可以修改 ...

  2. WinForm加载外部类库项目的集成开发模式

    在项目开发中有一定的团队用到了Nuget.Coding:但是这用起来还是不太方方便,在Winform中呢,我们可以把一个人的项目当作一个类库项目,因为它生成的是一个dll文件,也就是单一文件,拥有了它 ...

  3. Solr 17 - Solr的时间为什么比本地少8小时 (附修改方法)

    目录 1 为什么少8小时 2 如何查看Solr的时区 3 修改Solr的时区 3.1 Solr从数据库中同步数据的原理 3.2 为什么要修改时区 3.3 如何修改时区 1 为什么少8小时 (1) 原因 ...

  4. SLAM+语音机器人DIY系列：（六）SLAM建图与自主避障导航——2.google-cartographer机器人SLAM建图

    摘要 通过前面的基础学习,本章进入最为激动的机器人自主导航的学习.在前面的学习铺垫后,终于迎来了最大乐趣的时刻,就是赋予我们的miiboo机器人能自由行走的生命.本章将围绕机器人SLAM建图.导航避障 ...

  5. spring boot 2.0 Feign的客户端

    1.pom.xml <dependency> <groupId>org.springframework.cloud</groupId> <artifactId ...

  6. vue项目，axios请求图片接口，接口返回的是文件流的形式，如何转换成图片？

    axios .get('/captcha', { params: param, responseType: 'arraybuffer' }) .then(response => { return ...

  7. Vue.js 学习笔记 第5章 内置指令

    本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车 回顾一下第2.2节,我们己经介绍过指令(Di ...

  8. Android调试神器stetho使用详解和改造

    本文由云+社区发表 作者:NaOH 概述 stetho是Facebook开源的一个Android调试工具,项目地址:facebook/stetho 通过Stetho,开发者可以使用chrome的ins ...

  9. PHP Socket编程（转）

    [PHPsocket编程专题(理论篇)]初步理解TCP/IP.Http.Socket.md [PHPsocket编程专题(实战篇①)]php-socket通信演示 [PHPsocket编程专题(实战篇 ...

  10. Chrome启动后打开第一个网页很慢的解决方案

    Chrome启动后打开第一个网页很慢的解决方案 Chrome/Chromium以速度快著称,最近每当打开chrome的时候,打开第一个页面都非常慢,往往需要数十秒的时间,经分 析,应该是卡在了域名解析 ...