获取url中传递的参数,并将其转化为键值对的形式返回

最新推荐文章于 2023-12-27 20:45:10 发布

weixin_30455365

最新推荐文章于 2023-12-27 20:45:10 发布

阅读量563

点赞数

CC 4.0 BY-SA版权

文章标签： json swift javascript ViewUI

原文链接：http://www.cnblogs.com/loewe0202/p/5881292.html

本文介绍了一种使用JavaScript从URL中解析传递参数的方法，并通过两个页面间的跳转演示了如何实现跨页面参数传递及获取。该方法能有效处理多个任意参数，并以JSON形式返回。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

演示：从页面1跳转到页面2，跳转格式：window.location.href = encodeURI('text02.html?userid=10086?name=100?sex=男'); 传递任意个参数，跳转到页面2，并从页面2中获取页面1中传递的name值

　　页面1

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>text01</title>
 7         <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
 8     </head>
 9 
10     <body>
11         <div class="gotext02">gotext02</div>
12     </body>
13     <script type="text/javascript">
14         document.querySelector('.gotext02').onclick = function() {
15             window.location.href = encodeURI('text02.html?userid=10086?name=100?sex=男');
16         }
17     </script>
18 
19 </html>

　　页面2

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>text02</title>
 7         <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
 8     </head>
 9 
10     <body>
11         <div class="text02"></div>
12     </body>
13     <script type="text/javascript">
14         window.onload = function() {
15             var searchRes = getSearchVal();
16             document.querySelector('.text02').innerHTML = "name:" + searchRes.name;
17         }
18 
19         function getSearchVal() { //获取url中传递的参数
20             var searchRes = {};
21             var search = decodeURI(window.location.search);
22             searchRes.search = search;
23             searchRes.searchVal = search.replace(/\?/g, "\",\"");
24             searchRes.searchVal = searchRes.searchVal.replace(/\=/g, "\"\:\"");
25             searchRes.searchVal = '{' + searchRes.searchVal.substring(2, searchRes.searchVal.length) + '\"}';
26             searchRes.searchVal = JSON.parse(searchRes.searchVal);
27             return searchRes.searchVal;
28         }
29     </script>
30 
31 </html>