首先,大家需要明白的是,一般情况下我们进行页面间的传值(即页面间数据的共享或交换)时,都是和后台一起的。
当然前台也是可以在不同的页面之间进行传值的,不过在前台直接操作传值的这种方法并不建议,除非是特殊要求,不然还是建议和后台交互。
我要介绍的这两种方法都非常简单,基本上有前端基础的人一看就明白。
开始前的准备:
我们需要两个页面:a.html和b.html,这个大家自行创建。
还有两个关于jQuery的文件:jquery-3.3.1.min.js和jquery.params.js
这个jquery.params.js 是第二种方法要用的。
如果没有这个文件可以利用我提供的地址下载,也可以自行百度下载。
如果没有jquery-3.3.1.min.js,那就利用我提供的地址,直接去下载就行。
下载地址:
jquery.params.js-2.1.7版本下载【内附jquery-3.31.min.js以及下面第二种方法讲解的源码】
没了,就这么多。
一:通过URL传输之字符串切割
这种传输方法,顾名思义,就是通过URL地址来达到不同页面间的值的传输的目的。·
话不多说,直接上代码(a.html):
<body>
<input type="text">
<button>点击此处跳转传值</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("button").click(function () {
var num = $("input").val();
window.location.href = "b.html?num=" + num;
})
</script>
</body>
这一段代码,其实也就没多少行代码,但是就这几行代码就可以实现传值。
主要就是通过对URL的操作,通过"b.html?num=" + num来把写入文本框的值拼接到地址上。
我在文本框中写——“这是传输的值”,然后点击按钮。
此时,我们跳转到b页面,地址如图所示:
url地址图片
那么此时,我们任务就很简单了,只需对URL进行一番操作即可,我们看b.html页面的代码:
<body>
<script src="jquery-3.3.1.min.js"></script>
<script>
var url = decodeURI(window.location.href).split('=');
alert(url[1]);
</script>
</body>
这个我就重点解释一下:decodeURI(),这个函数的作用就是解码,大家都知道,URL地址都是经过编码的,【URL地址编码感兴趣的可以了解下】,直接获取编码的话,会造成中文乱码,所以采用decodeURI()函数进行解码,这样就不会出现乱码。
至于字符串的剪切,我想大家应该都懂。jquery字符串切割
二:通过URL传输之直接获取
有了第一种方法的解释,我想大家应该心里都有谱了,这第二种方法通过jquery.params.js,连字符切割都省了,可以直接进行获取。
直接上代码:(a.html不变,改变b.html)
<body>
<script src="jquery-3.3.1.min.js"></script>
<!-- 引入对应的文件 -->
<script src="jquery.params.js"></script>
<script>
var num= $.query.get("num");
document.write(num);
</script>
</body>
可以看到,这种方法简直不要太简单,简直是不要太爽,什么操作也不用,直接通过$.query.get(“num”)获取。
注: 以上两种方法亲测可用。
三:传值扩展
除了这两种方法外,还有其他方法,比如通过操作cookie进行传值,使用window.localStorage等,有兴趣的可以去了解一下。
简单说一下:
cookie的存储空间为4k,window.localStorage的存储空间为5M
使用cookie的话,可以在同源内的的任意网页中访问,存储数据的时间周期可以自由设置 。
window.localStorage是h5的技术,不是所有浏览器都支持的。
我个人倾向于通过url的方式进行传值。
但是大家也要注意的一点:通过地址传值,对所传值的长度是有限制的。
具体的可以参考URL传值长度限制
作者:@带甜味的盐@
来源:CSDN
原文:https://blog.csdn.net/s_y_w123/article/details/85023272
版权声明:本文为博主原创文章,转载请附上博文链接!