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

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

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

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

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

<!DOCTYPE html>

<html>

<head>

<title>练习</title>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width,

      initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

<link href="css/jquery.mobile-1.0.1.min.css"

      rel="stylesheet" type="text/css"/>

<script src="js/jquery-1.6.4.js"

      type="text/javascript" ></script>

<script src="js/jquery.mobile-1.0.1.js"  type="text/javascript" ></script>

<script type="text/javascript">

	function getParameterByName(name){

		var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);

		return match && decodeURIComponent(match[1].replace(/\+/g, ' '));

	}

	$('#page_Parameter1').live('pageshow',  function(event, ui){

		alert("第二个页面的参数：" + getParameterByName('parameter'));

	});

</script>

</head>

<body>

	 <section id="page_Parameter0" data-role="page">

	 	<header data-role="header">

	 		<h1>页面参数传值</h1>

	 	</header>

	 	<div class="content" data-role="content">

	 		<p>传递参数进入下一页，以Alert方式显示参数内容。<br/>

	 			传递参数进入<a href="?parameter=4321#page_Parameter1" rel="external">下一页</a><br/>

	 		</p>

	 	</div>

	 </section>

	 <section id="page_Parameter1" data-role="page">

	 	<header data-role="header">

	 		<h1>页面参数传递</h1>

	 	</header>

	 	<div class="content" data-role="content">

	 		<p>通过Alert显示前一个界面参数。<br/>

	 		<a href="#page_Parameter0">返回</a></p>

	 	</div>

	 </section>

</body>

</html>

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

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

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

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

<!DOCTYPE html>

<html>

<head>

<title>练习</title>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width,

      initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

<link href="css/jquery.mobile-1.0.1.min.css"

      rel="stylesheet" type="text/css"/>

<script src="js/jquery-1.6.4.js"

      type="text/javascript" ></script>

<script src="js/jquery.mobile-1.0.1.js"  type="text/javascript" ></script>

</head>

<body>

	<script type="text/javascript">

		if(window.localStorage){

			alert("浏览器支持localStorage");

		}else{

			alert("浏览器暂不支持localStorage");

		}

		if(window.sessionStorage){

			alert("浏览器支持sessionStorage");

		}else{

			alert("浏览器暂不支持sessionStorage")

		}

	</script>

</body>

</html>

通常，在jQuery Mobile中实现页面间参数传递时，我们不使用localStorage而是使用sessionStorage,因为不必持久化在本地。

<!DOCTYPE html>

<html>

<head>

<title>练习</title>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width,

      initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

<link href="css/jquery.mobile-1.0.1.min.css"

      rel="stylesheet" type="text/css"/>

<script src="js/jquery-1.6.4.js"

      type="text/javascript" ></script>

<script src="js/jquery.mobile-1.0.1.js"  type="text/javascript" ></script>

<script type="text/javascript">

	$('#page_Parameter1').live('pageshow', function(event, ui){

		alert("第二个界面的参数：" + sessionStorage.id);

	});

</script>

</head>

<body>

	<section id="page_Parameter0" data-role="page">

		<header data-role="header">

			<h1>页面参数传递</h1>

		</header>

		<div class="content" data-role="content">

			<p>传递参数进入下一页，以Alert方式显示参数内容。<br/>

			传递参数进入<a href="#page_Parameter1" onclick="sessionStorage.id=4321">下一页</a><br/>

			</p>

		</div>

	</section>

	<section id="page_Parameter1" data-role="page">

		<header data-role="header">

			<h1>页面参数传递</h1>

		</header>

		<div class="content" data-role="content">

			<p>通过Alert显示来自前一个界面的参数。<br/>

				<a href="#page_Parameter0">返回</a>

			</p>

		</div>

	</section>

</body>

</html>

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

  1. 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  2. 小强的HTML5移动开发之路（14）——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  3. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  4. 小强的HTML5移动开发之路（11）——链接，图片，表格，框架

    来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...

  5. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  6. 小强的HTML5移动开发之路（37）——jqMobi快速入门

    在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...

  7. 小强的HTML5移动开发之路（12）——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

  8. 小强的HTML5移动开发之路（3）——HTML5与HTML4比较

    来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...

  9. 小强的HTML5移动开发之路（1）——HTML介绍

    来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...

随机推荐

  1. java 位操作 bitwise(按位) operation bit

    java 位操作 bitwise(按位) operation bit //一篇对于 原码 反码 补码 的介绍 http://www.cnblogs.com/zhangziqiu/archive/201 ...

  2. 玲珑杯 Round 19 A simple math problem

    Time Limit:2s Memory Limit:128MByte Submissions:1599Solved:270 DESCRIPTION You have a sequence anan, ...

  3. BZOJ1492: [NOI2007]货币兑换Cash(CDQ分治，斜率优化动态规划)

    Description 小Y最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A纪念券(以下简称A券)和 B纪念券(以下 简称B券).每个持有金券的顾客都有一个自己的帐户.金券的数目可以是一个 ...

  4. Flask项目之手机端租房网站的实战开发（十四）

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  5. Unity3D教程：静态调用C#的dll

    就像使用.net自带的那些程序集一样.加入Reference,然后使用就可以. 因为windows环境下的Unity编译脚本时,本质上还是生成.net程序集.并且其C#脚本编程事实上就是.net C# ...

  6. D3.js中对array的使用

    由于D3类库和array密切相关,我们有必要讨论一下D3中的数据绑定以及在数组内部运算的方法. 1.D3中的数组 和其他编程语言一样,D3的数组元素可以是数字或者字符等类型,例如: someData= ...

  7. php设置http请求头信息和响应头信息

    php设置http请求头信息和响应头信息 设置请求服务器的头信息可以用fsockopen,curl组件,header函数只能用来设置客户端响应的头信息,不能设置服务器的头信息. 例子;  一.head ...

  8. Bitmap-把方形图片处理为圆形

    这个是直接在网上转载的,自己验证可靠 转载自http://my.oschina.net/zhouz/blog/213164 直接贴上代码 import android.graphics.Bitmap; ...

  9. ontouch、dispatchtouchevent、interceptouchevent-相关事件

    这几天一直在研究onTouch的相关方法,今天我们就来看看onTouchEvent.dispatchTouchEvent.onIntercepTouchEvent这三个方法在控件之间的传递顺序 pub ...

  10. 13.constexpr

    #include <iostream> using namespace std; //声明返回值为常量表达式 constexpr int get() { ; return num; } v ...