這次頁面之間的傳值是升級版本,為什么是升級版本呢,因為這次頁面的傳值不一樣了。大家可以看一下我原來的文章《關於獲取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();這個時候就是我們能得到的數組了。然后就可以任意使用了。
其實這里跟上次的是差不多的,只是多了加密和格式化的,需要注意的是,加密和格式化的先后順序,要不然是不能正確的解析這個需要傳輸的數組的。