關於獲取URL中傳值的解決方法--升級版


  這次頁面之間的傳值是升級版本,為什么是升級版本呢,因為這次頁面的傳值不一樣了。大家可以看一下我原來的文章《關於獲取URL中傳值的解決方法》

  其實上次就已經比較清楚的介紹了頁面之間的傳值,但是這次要傳輸的是一個數組,或者是一個JSON字符串。這次就不太一樣了。首先我們來看頁面index1.html,這個頁面需要向index2.html中傳輸一個數組。而且里面還含有中文信息。先看index1.html中的內容吧:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>頁面一</title>
 6     </head>
 7     <body>
 8         <div>頁面一</div>
 9     </body>
10     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
11     <script type="text/javascript">
12 //        var arr={"a":{
13 //            "id":1,
14 //            "name":"標簽一"
15 //        },"b":{
16 //            "id":2,
17 //            "name":"標簽二"
18 //        },"c":{
19 //            "id":3,
20 //            "name":"標簽三"
21 //        }};
22 var arr=[{"id":1,"name":"標簽"}
23 ]
24 //        console.log(arr);
25 //        console.log(JSON.stringify(arr))
26 //        console.log(encodeURI(JSON.stringify(arr)))
27 //        console.log(JSON.parse(decodeURI(encodeURI(JSON.stringify(arr)))));
28         $('div').click(function(){
29             window.location.replace('./index2.html?data='+encodeURI(encodeURI(JSON.stringify(arr))));
30         })
31     </script>
32 </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頁面的內容;

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>頁面二</title>
 6     </head>
 7     <body>
 8         <div>頁面二</div>
 9     </body>
10     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
11     <script type="text/javascript">
12         function geturl(name) { //獲取頁面之間的傳值
13             var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
14             var r = window.location.search.substr(1).match(reg);
15             if(r != null) return unescape(r[2]);
16             return null;
17         };
18         var arr = geturl('data');
19         var arr1 = JSON.parse(decodeURI(decodeURI(arr)));
20         var name = arr1[0].name;
21         console.log(decodeURI(name))
22         console.log(arr1)
23     </script>
24 </html>

這里面的geturl()在上個函數中已經講解過了,主要的是我們看一下第19行,首先我們是兩次decodeURI(),然后是JSON.parse();這個時候就是我們能得到的數組了。然后就可以任意使用了。

  其實這里跟上次的是差不多的,只是多了加密和格式化的,需要注意的是,加密和格式化的先后順序,要不然是不能正確的解析這個需要傳輸的數組的。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM