关于获取URL中传值的解决方法--升级版
这次页面之间的传值是升级版本,为什么是升级版本呢,因为这次页面的传值不一样了。大家可以看一下我原来的文章《关于获取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中传值的解决方法--升级版的更多相关文章
- 关于获取URL中传值的解决方法
在我们页面的URL中包含着很多信息,包括域名,协议等等这里就不一一介绍了),对于我们开发者而言,使用比较多的就是页面之间的传值.为什么要页面传值呢?很简单,当你在浏览一个商品页面的时候你要看到一个商品 ...
- tomcat下获取当前路径的url中含有空格解决方法
参考博文(http://www.360doc.com/content/11/1009/17/4602013_154657565.shtml) web项目发布到Tomcat之后,如果tomcat是安装在 ...
- js获取url中的参数(解决中文乱码)
这个是封装好的方法: function getQueryString(name) { var reg = new RegExp("(^|&)" + name + " ...
- javascript获取url中对应参数的方法
利用正则表达式和location.search方法,可以简便的获取到对应的参数: function getQueryString(name) {var reg = new RegExp(" ...
- iOS 的url中含有中文解决方法
[NSURLURLWithString:urlString]生成URL对象时,iOS客户端不能正确进行网络请求,网上找到的URLEncode方法又不能完全解决问题. 方法1: NSString* en ...
- js获取url中的参数,并保证获取到的参数不乱码
//网上比较经典的js获取url中的参数的方法 function getQueryString(name) { var reg = new RegExp("(^|&)" + ...
- APPCAN开发笔记:html页面之间的参数传递:使用js获取url中的参数,以及在APPCAN中不能使用的解决方法
用PHP的GET/POST方式来传递方式已经是司空见惯了,但是如果我的页面是一个静态的html的页面,想传递参数的时候要怎么办呢?在APPCAN的开发中我们会经常遇到这样的问题,因为所有的页面都是静态 ...
- 记录一次bug解决过程:velocity中获取url中的参数
一.总结 在Webx的Velocity中获取url中参数:$rundata.getRequest().getParameter('userId') 在Webx项目中,防止CSRF攻击(Cross-si ...
- JS获取URL中参数值(QueryString)的4种方法分享<转>
方法一:正则法 复制代码代码如下: function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^ ...
随机推荐
- TensorFlow从1到2(八)过拟合和欠拟合的优化
<从锅炉工到AI专家(6)>一文中,我们把神经网络模型降维,简单的在二维空间中介绍了过拟合和欠拟合的现象和解决方法.但是因为条件所限,在该文中我们只介绍了理论,并没有实际观察现象和应对. ...
- kubernetes进阶之四:Label和Label Selector
一:什么是Label Label是Kubernetes系列中另外一个核心概念.是一组绑定到K8s资源对象上的key/value对.同一个对象的labels属性的key必须唯一.label可以附加到各种 ...
- kubernetes实践之二:Kubernetes可视WEB UI Dashboard搭建
Kubernetes可视WEBUI Dashboard搭建 支持浏览器:火狐 一.Dashboard下载地址 git clone https://github.com/kubernetes/kuber ...
- 配置rsync+inotify实时同步
与上一篇同步做 配置rsync+inotify实时同步 1:调整inotify内核参数 在linux内核中,默认的inotify机制提供三个调控参数:max_queue_events.max_user ...
- 14 ,CSS 文字与文本
1.CSS 中长度与颜色 2.CSS 中的文字属性 3.CSS 中的文本属性 14.1 CSS 中长度与颜色 长度单位 说明 in 英寸 cm 公分 mm 公里 cm 以目前字体高度为单位 ex 以小 ...
- Dynamics CRM模拟OAuth请求获得Token后在外部调用Web API
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复233或者20161104可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...
- JVM利器:Serviceability Agent介绍
本文首发于公众号:javaadu 简单介绍 构建高性能的Java应用过程中,必然会遇到各种各样的问题,像CPU飙高.内存泄漏.应用奔溃,以及其他疑难杂症,这时可以使用Serviceability Ag ...
- [ gczdac ] 20190213 开博客啦!
测试一下! 今天开了新博客! 还自己改了下首页! 开心!!!!! 访者必阅 https://www.cnblogs.com/gczdac/ https://blog.csdn.net/qq_43540 ...
- CF592D Super M
嘟嘟嘟 首先这题虽然不是很难,但是黄题是不是有点过分了--好歹算个蓝题啊. 手玩样例得知,这哥们儿瞬移到的城市\(A\)一定是这些被攻击的城市构成的树的一个叶子,然后他经过的最后一个城市\(B\)和\ ...
- Java数据结构和算法 - 栈和队列
Q: 栈.队列与数组的区别? A: 本篇主要涉及三种数据存储类型:栈.队列和优先级队列,它与数组主要有如下三个区别: A: (一)程序员工具 数组和其他的结构(栈.队列.链表.树等等)都适用于数据库应 ...