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