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

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

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

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

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

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",否则页面间参数传递无法正常执行。

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

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

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

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,因为不必持久化在本地。

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>
 

最新文章

  1. Linux异常表
  2. JAVA基础学习之XMLCDATA区、XML处理指令、XML约束概述、JavaBean、XML解析(8)
  3. AES128和AES256主要区别和安全程度是多少?他们对于机器的消耗是怎样的?两者性能如何?实际开发如何选择?
  4. 黑马程序员——JAVA基础之简述 类的封装
  5. 【HDU】5247-找连续数(直接暴力)
  6. python学习笔记--Django入门一 网页显示时间
  7. MYSQL视图的学习笔记
  8. Android Animations动画使用详解
  9. Android对于静默安装和卸载
  10. echarts的部署和使用
  11. main函数之后的调用
  12. Centos下添加静态路由(临时和永久有效)的操作记录
  13. 全面深入介绍C++字符串:string类
  14. SURF算法
  15. pyhon 之 数据类型详解
  16. 01-Javascript简介
  17. 剑指offer5
  18. JWT 基础教程
  19. PNP NPN NMOS PMOS S8050 S8550 SI2301 SI2302 2N3904 2N3906 78L05 TL431
  20. modelsim使用常见问题及解决办法集锦③

热门文章

  1. 升级npm
  2. Oracle数据库文件路径变更
  3. javascript平时小例子⑨(小型抽奖功能)
  4. HTML5中createPattern()
  5. 从零开始学习Linux(cp 命令)
  6. HTML快速入门2
  7. 三HttpServletResponse对象介绍(1)
  8. 关于CPU Cache -- 程序猿需要知道的那些事
  9. Deferred和Promise之间有什么区别呢?
  10. (easy)LeetCode 219.Contains Duplicate II
  11. usb协议分析-设备描述符配置包-描述符
  12. codeforces 212E IT Restaurants(树形dp+背包思想)
  13. [LeetCode] Word Break II 解题思路
  14. USB OTG介绍(转载)
  15. C# 连接SQL Server数据库的几种方式--server+data source等方式
  16. 第一次&quot;正经面试&quot;之发现自己的缺陷和不足
  17. IDE eclipse PyDev插件安装
  18. Mysql免安装版配置【图文版和文字版】
  19. Jenkins Kubernetes Slave 调度效率优化小记
  20. freemarker中的substring取子串(十四)