JQuery Mobile 頁面參數傳遞(轉)

在單頁模版中使用基於HTTP的方式經過POST和GET請求傳遞參數，而在多頁模版中不須要與服務器進行通訊，一般在多頁模版中有如下三種方法來實現頁面間的參數傳遞。javascript

一、GET方式：在前一個頁面生成參數並傳入下一個頁面，而後在下一個頁面中進行GET內容解析。css

二、經過HTML5的Web Storage進行參數傳遞。html

三、創建當前頁面變量，在前一個頁面將所需傳遞的參數內容賦值到變量中，在後一個頁面從變量中將參數取出來。（程序靈活性較弱）java

1、以GET方式實現頁面間參數傳遞jquery

     
   01. 
   <!DOCTYPE html> 
  
   02. 
   <html> 
  
   03. 
   <head> 
  
   04. 
   <title>練習</title> 
  
   05. 
   <meta charset="utf-8" /> 
  
   06. 
   <meta name="viewport" content="width=device-width, 
  
   07. 
   initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> 
  
   08. 
   <link href="css/jquery.mobile-1.0.1.min.css" 
  
   09. 
   rel="stylesheet" type="text/css"/> 
  
   10. 
   <script src="js/jquery-1.6.4.js" 
  
   11. 
   type="text/javascript" ></script> 
  
   12. 
   <script src="js/jquery.mobile-1.0.1.js"  type="text/javascript" ></script> 
  
   13. 
   <script type="text/javascript"> 
  
   14. 
   function getParameterByName(name){ 
  
   15. 
   var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search); 
  
   16. 
   return match && decodeURIComponent(match[1].replace(/+/g, ' ')); 
  
   17. 
   } 
  
   18. 
   $('#page_Parameter1').live('pageshow',  function(event, ui){ 
  
   19. 
   alert("第二個頁面的參數：" + getParameterByName('parameter')); 
  
   20. 
   }); 
  
   21. 
   </script> 
  
   22. 
   </head> 
  
   23. 
   <body> 
  
   24. 
   <section id="page_Parameter0" data-role="page"> 
  
   25. 
   <header data-role="header"> 
  
   26. 
   <h3>頁面參數傳值</h3> 
  
   27. 
   </header> 
  
   28. 
   <div class="content" data-role="content"> 
  
   29. 
   <p>傳遞參數進入下一頁，以Alert方式顯示參數內容。<br/> 
  
   30. 
   傳遞參數進入<a href="?parameter=4321#page_Parameter1" rel="external">下一頁</a><br/> 
  
   31. 
   </p> 
  
   32. 
   </div> 
  
   33. 
   </section> 
  
   34. 
   <section id="page_Parameter1" data-role="page"> 
  
   35. 
   <header data-role="header"> 
  
   36. 
   <h3>頁面參數傳遞</h3> 
  
   37. 
   </header> 
  
   38. 
   <div class="content" data-role="content"> 
  
   39. 
   <p>經過Alert顯示前一個界面參數。<br/> 
  
   40. 
   <a href="#page_Parameter0">返回</a></p> 
  
   41. 
   </div> 
  
   42. 
   </section> 
  
   43. 
   </body> 
  
   44. 
   </html>

注意：要註明訪問的頁面形式爲外部連接形式rel="external",不然頁面間參數傳遞沒法正常執行。瀏覽器

2、經過HTML5 Web Storage特性實現參數傳遞服務器

一般包含兩部分，sessionStorage是將存儲內容以會話的形式存儲在瀏覽器中，因爲是會話級別的存儲，當瀏覽器關閉以後，sessionStorage中的內容會所有消失。localStorage是基於持久化的存儲，相似於傳統HTML開發中cookie的使用，除非主動刪除localStorage中的內容，不然將不會刪除。cookie

檢查瀏覽器支持Web Storage特性：session

     
   01. 
   <!DOCTYPE html> 
  
   02. 
   <html> 
  
   03. 
   <head> 
  
   04. 
   <title>練習</title> 
  
   05. 
   <meta charset="utf-8" /> 
  
   06. 
   <meta name="viewport" content="width=device-width, 
  
   07. 
   initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> 
  
   08. 
   <link href="css/jquery.mobile-1.0.1.min.css" 
  
   09. 
   rel="stylesheet" type="text/css"/> 
  
   10. 
   <script src="js/jquery-1.6.4.js" 
  
   11. 
   type="text/javascript" ></script> 
  
   12. 
   <script src="js/jquery.mobile-1.0.1.js"  type="text/javascript" ></script> 
  
   13. 
   </head> 
  
   14. 
   <body> 
  
   15. 
   <script type="text/javascript"> 
  
   16. 
   if(window.localStorage){ 
  
   17. 
   alert("瀏覽器支持localStorage"); 
  
   18. 
   }else{ 
  
   19. 
   alert("瀏覽器暫不支持localStorage"); 
  
   20. 
   } 
  
   21. 
     
   22. 
   if(window.sessionStorage){ 
  
   23. 
   alert("瀏覽器支持sessionStorage"); 
  
   24. 
   }else{ 
  
   25. 
   alert("瀏覽器暫不支持sessionStorage") 
  
   26. 
   } 
  
   27. 
   </script> 
  
   28. 
   </body> 
  
   29. 
   </html>

一般，在jQuery Mobile中實現頁面間參數傳遞時，咱們不使用localStorage而是使用sessionStorage,由於沒必要持久化在本地。post

     
   01. 
   <!DOCTYPE html> 
  
   02. 
   <html> 
  
   03. 
   <head> 
  
   04. 
   <title>練習</title> 
  
   05. 
   <meta charset="utf-8" /> 
  
   06. 
   <meta name="viewport" content="width=device-width, 
  
   07. 
   initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> 
  
   08. 
   <link href="css/jquery.mobile-1.0.1.min.css" 
  
   09. 
   rel="stylesheet" type="text/css"/> 
  
   10. 
   <script src="js/jquery-1.6.4.js" 
  
   11. 
   type="text/javascript" ></script> 
  
   12. 
   <script src="js/jquery.mobile-1.0.1.js"  type="text/javascript" ></script> 
  
   13. 
   <script type="text/javascript"> 
  
   14. 
   $('#page_Parameter1').live('pageshow', function(event, ui){ 
  
   15. 
   alert("第二個界面的參數：" + sessionStorage.id); 
  
   16. 
   }); 
  
   17. 
   </script> 
  
   18. 
   </head> 
  
   19. 
   <body> 
  
   20. 
   <section id="page_Parameter0" data-role="page"> 
  
   21. 
   <header data-role="header"> 
  
   22. 
   <h3>頁面參數傳遞</h3> 
  
   23. 
   </header> 
  
   24. 
   <div class="content" data-role="content"> 
  
   25. 
   <p>傳遞參數進入下一頁，以Alert方式顯示參數內容。<br/> 
  
   26. 
   傳遞參數進入<a href="#page_Parameter1" onclick="sessionStorage.id=4321">下一頁</a><br/> 
  
   27. 
   </p> 
  
   28. 
   </div> 
  
   29. 
   </section> 
  
   30. 
   <section id="page_Parameter1" data-role="page"> 
  
   31. 
   <header data-role="header"> 
  
   32. 
   <h3>頁面參數傳遞</h3> 
  
   33. 
   </header> 
  
   34. 
   <div class="content" data-role="content"> 
  
   35. 
   <p>經過Alert顯示來自前一個界面的參數。<br/> 
  
   36. 
   <a href="#page_Parameter0">返回</a> 
  
   37. 
   </p> 
  
   38. 
   </div> 
  
   39. 
   </section> 
  
   40. 
   </body> 
  
   41. 
   </html>

分類: HTML相關, JavaScript