码迷,mamicode.com
首页 > 移动开发 > 详细

HTML5移动开发之路(53)——jQueryMobile页面间参数传递

时间:2016-11-22 17:31:36      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:ons   检查   dev   代码   highlight   程序   tle   fonts   csdn   

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(53)——jQueryMobile页面间参数传递

在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递。

1、GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析。

2、通过HTML5的Web Storage进行参数传递。

3、建立当前页面变量,在前一个页面将所需传递的参数内容赋值到变量中,在后一个页面从变量中将参数取出来。(程序灵活性较弱)

一、以GET方式实现页面间参数传递

 

[html] view plain copy
 
 print?技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>练习</title>  
  5. <meta charset="utf-8" />  
  6. <meta name="viewport" content="width=device-width,   
  7.       initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />  
  8. <link href="css/jquery.mobile-1.0.1.min.css"   
  9.       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.             <h1>页面参数传值</h1>  
  27.         </header>  
  28.         <div class="content" data-role="content">  
  29.             <p>传递参数进入下一页,以Alert方式显示参数内容。<br/>  
  30.                 传递参数进入<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.             <h1>页面参数传递</h1>  
  37.         </header>  
  38.         <div class="content" data-role="content">  
  39.             <p>通过Alert显示前一个界面参数。<br/>   
  40.             <href="#page_Parameter0">返回</a></p>  
  41.         </div>  
  42.      </section>  
  43. </body>  
  44. </html>  

技术分享

 

注意:要注明访问的页面形式为外部链接形式rel="external",否则页面间参数传递无法正常执行。

二、通过Html5 Web Storage特性实现参数传递

通常包含两部分,sessionStorage是将存储内容以会话的形式存储在浏览器中,由于是会话级别的存储,当浏览器关闭之后,sessionStorage中的内容会全部消失。localStorage是基于持久化的存储,类似于传统HTML开发中cookie的使用,除非主动删除localStorage中的内容,否则将不会删除。

检查浏览器支持Web Storage特性:

 

[html] view plain copy
 
 print?技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>练习</title>  
  5. <meta charset="utf-8" />  
  6. <meta name="viewport" content="width=device-width,   
  7.       initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />  
  8. <link href="css/jquery.mobile-1.0.1.min.css"   
  9.       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,因为不必持久化在本地。

 

 

[html] view plain copy
 
 print?技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>练习</title>  
  5. <meta charset="utf-8" />  
  6. <meta name="viewport" content="width=device-width,   
  7.       initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />  
  8. <link href="css/jquery.mobile-1.0.1.min.css"   
  9.       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.             <h1>页面参数传递</h1>  
  23.         </header>  
  24.         <div class="content" data-role="content">  
  25.             <p>传递参数进入下一页,以Alert方式显示参数内容。<br/>  
  26.             传递参数进入<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.             <h1>页面参数传递</h1>  
  33.         </header>  
  34.         <div class="content" data-role="content">  
  35.             <p>通过Alert显示来自前一个界面的参数。<br/>  
  36.                 <href="#page_Parameter0">返回</a>  
  37.             </p>  
  38.         </div>  
  39.     </section>  
  40. </body>  
  41. </html>  

HTML5移动开发之路(53)——jQueryMobile页面间参数传递

标签:ons   检查   dev   代码   highlight   程序   tle   fonts   csdn   

原文地址:http://www.cnblogs.com/itxdl/p/6089844.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!