在单页模版中使用基于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>

JQuery Mobile 页面参数传递的更多相关文章

  1. JQuery Mobile 页面参数传递(转)

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

  2. [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布

    [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局 当我们专注地研究人类生活的空虚,并考虑荣华富贵空幻无常时,或许我们正在阿谀逢迎自己懒惰的天 ...

  3. （二）Jquery Mobile介绍以及Jquery Mobile页面与对话框

    Jquery Mobile介绍以及Jquery Mobile页面与对话框  一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地 ...

  4. jQuery Mobile 页面事件

    jQuery Mobile 页面事件 在 jQuery Mobile 中与页面打交道的事件被分为四类: Page Initialization - 在页面创建前,当页面创建时,以及在页面初始化之后 P ...

  5. 用谷歌浏览器Chrome浏览jQuery Mobile页面需要配置Tomcat服务器

    在浏览jQuery Mobile 页面中,除了 Chrome浏览器出错外,其他的浏览器都ok: 这里,是因为需要单独配置 Tomcat 服务: 1.先配置java jdk: 2.下载,安装,配置,To ...

  6. 02.Jquery Mobile介绍以及Jquery Mobile页面与对话框

    一.为什么要学Jquery Mobile   JqueryMobile 是jquery的移动版本,懂基本的jquery知识,会简单的html+css就可以完成很多复杂的功能,还有就是这个框架在企业中用 ...

  7. jQuery Mobile页面跳转切换的几种方式

    jQuery Mobile在移动开发中越来越受到欢迎. 而他的各个版本号也在持续不断的更新中.相同的我也非常喜欢它,它加快了我们开发HTML5的速度. 同一时候又具备jQuery一样的操作方法. 学起 ...

  8. jquery mobile页面跳转缓存问题解决

    最近,我的一个写后端的同事因为缺前端自己做起了前端的活儿,因为对前端的不熟悉,找寻了一些现成框架想轻松了事,做一个web app他选了jquery mobile,开发效率确实高,但是这个框架的一些坑也 ...

  9. jQuery Mobile页面返回无需重新get

    最近公司的web app项目,使得我有幸一直接触和学习jQuery Mobile.这确实是一个很不错的移动开发库,有助于擅长web开发的工程师,快速入门并构建自己的移动应用.但是在前两天,我碰到了一个 ...

随机推荐

  1. Python-03-基础

    一.集合 集合(set)是一个无序的.不重复的元素组合,它的主要作用如下: 去重:把一个列表变成集合,就会自动去重. 关系测试:测试两组数据之前的交集.差集.并集等关系. 常用操作 # 创建数值集合 ...

  2. ZooKeeper 笔记(5) ACL(Access Control List)访问控制列表

    zk做为分布式架构中的重要中间件,通常会在上面以节点的方式存储一些关键信息,默认情况下,所有应用都可以读写任何节点,在复杂的应用中,这不太安全,ZK通过ACL机制来解决访问权限问题,详见官网文档:ht ...

  3. Java里的生产者-消费者模型(Producer and Consumer Pattern in Java)

    生产者-消费者模型是多线程问题里面的经典问题,也是面试的常见问题.有如下几个常见的实现方法: 1. wait()/notify() 2. lock & condition 3. Blockin ...

  4. 微信小程序之登录态维护(十一)

    [未经作者本人同意,请勿以任何形式转载] >什么是登录态? 所谓登录态,就是程序在运行时,能够识别当前用户,能够证明自己的唯一性且合法. 我们知道,WEB服务器通过浏览器携带的cookie获取s ...

  5. [CareerCup] 17.2 Tic Tac Toe 井字棋游戏

    17.2 Design an algorithm to figure out if someone has won a game oftic-tac-toe. 这道题让我们判断玩家是否能赢井字棋游戏, ...

  6. 在 JS 中使用 fetch 更加高效地进行网络请求

    在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用. 我的源博客地址:http://blog.parryqiu.com/2016/03/ ...

  7. [转]Java线程安全总结

    最近想将java基础的一些东西都整理整理,写下来,这是对知识的总结,也是一种乐趣.已经拟好了提纲,大概分为这几个主题: java线程安全,java垃圾收集,java并发包详细介绍,java profi ...

  8. HtmlUnit初探

    HtmlUnit是一个用java实现的浏览器,是一个无界面的浏览器(headless browser),跟phatomJS好像是同一类事物. HtmlUnit基于apache httpClient,而 ...

  9. cocopod 中添加第三方框架，包含静态库文件，使用svn添加上传

    step one: 进入静态库文件的目录 cd 路径: step two:使用命令添加 svn add 静态库名字; 然后更新一下代码就OK

  10. Function构造函数

    使用Function构造函数, 也能够创建函数, 和使用关键字function定义函数有几点区别: 使用function关键字这样定义函数: var f = function(x,y) {return ...