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

本文为 兄弟连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. 传递参数进入<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. <h1>页面参数传递</h1>
  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",否则页面间参数传递无法正常执行。

二、通过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. if(window.sessionStorage){
  22. alert("浏览器支持sessionStorage");
  23. }else{
  24. alert("浏览器暂不支持sessionStorage")
  25. }
  26. </script>
  27. </body>
  28. </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. 传递参数进入<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. <h1>页面参数传递</h1>
  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>
时间： 2024-10-05 06:57:32

HTML5移动开发之路（53）——jQueryMobile页面间参数传递的相关文章

小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递

在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析. 2.通过HTML5的Web Storage进行参数传递. 3.建立当前页面变量,在前一个页面将所需传递的参数内容赋值到变量中,在后一个页面从变量中将参数取出来.(程序灵活性较弱) 一.以GET方式实现页面间参数传递 <!DOCTYPE html

HTML5移动开发之路（50）——jquerymobile页面初始化过程

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(50)--jquerymobile页面初始化过程 了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图: 图中用红色框圈起来的是界面中的事件,测试代码如下: [html] view plain copy print? <!DOCTYPE html> <html> <head> <title>练习</title

HTML5移动开发之路（51）——jquerymobile中改善页面访问速度

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(51)--jquerymobile中改善页面访问速度 在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的流畅性,但是多个页面要一次性下载,所以下载时间变长,用户体验也会受到影响. 在基于预取技术的开发中,当第一个页面的DOM对象加载完成后,jQuery Mob

小强的HTML5移动开发之路（50）——jquerymobile页面初始化过程

为了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图: 图中用红色框圈起来的是界面中的事件,测试代码如下: <!DOCTYPE html> <html> <head> <title>练习</title> <meta charset="utf-8"> <meta name="viewport" content="width=

小强的HTML5移动开发之路（51）——jquerymobile中改善页面访问速度

在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的流畅性,但是多个页面要一次性下载,所以下载时间变长,用户体验也会受到影响. 在基于预取技术的开发中,当第一个页面的DOM对象加载完成后,jQuery Mobile会对标记data-prefetch的链接地址进行预取操作.预取的详细过程如下: 注意:使用预取功能时,不建议给所有链接都添加data-pr

HTML5移动开发之路（52）——jquerymobile中的触控交互

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(52)--jquerymobile中的触控交互 当使用移动设备进行触控操作时,最常用的就是轻击.按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为. 一.轻击与按住 直接上代码(一切皆在代码中,细细品吧!) [html] view plain copy print? <!DOCTYPE html> <html> <head> <t

HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(43)--JqueryMobile页眉.工具栏和标签栏导航 一.页眉 1.添加页眉和页脚 [html] view plain copy print? <div data-role="header"> <h1>第 1 页</h1> </div> [html] view plain copy print? <div data-role="

小强的HTML5移动开发之路（52）——jquerymobile中的触控交互

当使用移动设备进行触控操作时,最常用的就是轻击.按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为. 一.轻击与按住 直接上代码(一切皆在代码中,细细品吧!) <!DOCTYPE html> <html> <head> <title>练习</title> <meta charset="utf-8"> <meta name="viewport"

HTML5移动开发之路（44）——JqueryMobile中的按钮

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(44)--JqueryMobile中的按钮 一.链接按钮 [html] view plain copy print? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Web 应用程序</title> <link href=