標籤：jquery mobile html5 參數傳遞 android
在單頁模版中使用基於HTTP的方式通過POST和GET請求傳遞參數，而在多頁模版中不需要與伺服器進行通訊，通常在多頁模版中有以下三種方法來實現頁面間的參數傳遞。
1、GET方式：在前一個頁面產生參數並傳入下一個頁面，然後在下一個頁面中進行GET內容解析。
2、通過HTML5的Web Storage進行參數傳遞。
3、建立當前頁面變數，在前一個頁面將所需傳遞的參數內容賦值到變數中，在後一個頁面從變數中將參數取出來。（程式靈活性較弱）
一、以GET方式實現頁面間參數傳遞
<!DOCTYPE html><html><head><title>練習</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /><link href="css/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/><script src="js/jquery-1.6.4.js" type="text/javascript" ></script><script src="js/jquery.mobile-1.0.1.js" type="text/javascript" ></script><script type="text/javascript">function getParameterByName(name){var match = RegExp(‘[?&]‘ + name + ‘=([^&]*)‘).exec(window.location.search);return match && decodeURIComponent(match[1].replace(/\+/g, ‘ ‘));}$(‘#page_Parameter1‘).live(‘pageshow‘, function(event, ui){alert("第二個頁面的參數：" + getParameterByName(‘parameter‘));});</script></head><body> <section id="page_Parameter0" data-role="page"> <header data-role="header"> <h1>頁面參數傳值</h1> </header> <div class="content" data-role="content"> <p>傳遞參數進入下一頁，以Alert方式顯示參數內容。<br/> 傳遞參數進入<a href="?parameter=4321#page_Parameter1" rel="external">下一頁</a><br/> </p> </div> </section> <section id="page_Parameter1" data-role="page"> <header data-role="header"> <h1>頁面參數傳遞</h1> </header> <div class="content" data-role="content"> <p>通過Alert顯示前一個介面參數。<br/> <a href="#page_Parameter0">返回</a></p> </div> </section></body></html>
注意：要註明訪問的頁面形式為外部連結形式rel="external",否則頁面間參數傳遞無法正常執行。
二、通過HTML5 Web Storage特性實現參數傳遞
通常包含兩部分，sessionStorage是將儲存內容以會話的形式儲存在瀏覽器中，由於是會話層級的儲存，當瀏覽器關閉之後，sessionStorage中的內容會全部消失。localStorage是基於持久化的儲存，類似於傳統HTML開發中cookie的使用，除非主動刪除localStorage中的內容，否則將不會刪除。
檢查瀏覽器支援Web Storage特性：
<!DOCTYPE html><html><head><title>練習</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /><link href="css/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/><script src="js/jquery-1.6.4.js" type="text/javascript" ></script><script src="js/jquery.mobile-1.0.1.js" type="text/javascript" ></script></head><body><script type="text/javascript">if(window.localStorage){alert("瀏覽器支援localStorage");}else{alert("瀏覽器暫不支援localStorage");}if(window.sessionStorage){alert("瀏覽器支援sessionStorage");}else{alert("瀏覽器暫不支援sessionStorage")}</script></body></html>通常，在jQuery Mobile中實現頁面間參數傳遞時，我們不使用localStorage而是使用sessionStorage,因為不必持久化在本地。
<!DOCTYPE html><html><head><title>練習</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /><link href="css/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/><script src="js/jquery-1.6.4.js" type="text/javascript" ></script><script src="js/jquery.mobile-1.0.1.js" type="text/javascript" ></script><script type="text/javascript">$(‘#page_Parameter1‘).live(‘pageshow‘, function(event, ui){alert("第二個介面的參數：" + sessionStorage.id);});</script></head><body><section id="page_Parameter0" data-role="page"><header data-role="header"><h1>頁面參數傳遞</h1></header><div class="content" data-role="content"><p>傳遞參數進入下一頁，以Alert方式顯示參數內容。<br/>傳遞參數進入<a href="#page_Parameter1" onclick="sessionStorage.id=4321">下一頁</a><br/></p></div></section><section id="page_Parameter1" data-role="page"><header data-role="header"><h1>頁面參數傳遞</h1></header><div class="content" data-role="content"><p>通過Alert顯示來自前一個介面的參數。<br/><a href="#page_Parameter0">返回</a></p></div></section></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
