萧墙HTML5手机发展之路（53）——jQueryMobile页面之间的参数传递
基于单个页面模板HTTP通过路POST和GET请求传递参数。在多页模板，并且不需要server沟通，通常有三种方式在多页模板来实现页面之间的参数传递。
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>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF3YW5nYW5iYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
注意：要注明訪问的页面形式为外部链接形式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页面之间的参数传递的更多相关文章
- 萧墙HTML5手机发展之路（51）——jquerymobile在提高页面访问速度
正在使用jQuery Mobile开发时间可以选择单页模板和多页模板,在单页模板时从一个页面跳转到另一个页面时从需要server要求.用户会感到轻微的停顿. 使用多页模板,为了改善网页之间跳跃的流畅, ...
- 小强HTML5手机发展之路（52）——jquerymobile触摸互动
当使用移动设备的触摸操作,最常用的是点击.按住屏幕或手势,jQuery Mobile能够通过触摸事件绑定行为来响应用户的特定触摸. 一个.点击并按住 直接在代码(在代码中的一切,它使产品!) < ...
- 发展合作-ASP.Net传递页面之间的值
在合作开发中,在页面串传值的时候,遇到了一些困难.在网上搜罗了一下,发现好多的传值方式,能够简单地分下面三种. 一. URL传值 原页面的值放到目标页面的URL中.然后通过QueryString方法获 ...
- 小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递
在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...
- 小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
- IS创新之路 -- 都昌公司赋能型HIT企业发展之路
◆◆前言 近日,上海瑞金医院对我司表示:“我院从2000年开始自主开发医院信息系统,走出了一条可持续的信息化发展之路.已建成五大系统,284个子系统.但我院仍然坚持在努力推进以电子病历为核心医院信息化 ...
- 从Instagram“宁静、规则”的成功 看国内APP发展之路
看国内APP发展之路" title="从Instagram"宁静.规则"的成功 看国内APP发展之路"> Instagram在全球获得的巨大成功 ...
- Atitit 信用卡与会员卡（包括银行卡）的发展之路
Atitit 信用卡与会员卡(包括银行卡)的发展之路 实现跨机构卡片内金额的流动解决方案 1.1. 财务卡片本质上都是会员卡1 1.2. 卡片的发展阶段1 2. 实现跨机构卡片内金额的流动解决方案(加 ...
- HTML5手机APP开发入(5)
HTML5手机APP开发入(5) 回顾一下 HTML5手机APP开发入(4) 如何自定义Component,directive HTML5手机APP开发入(3) 如何实现MVC的代码重构,自定义一个P ...
随机推荐
- .Net程序猿乐Android发展---(10)框架布局FrameLayout
帧布局FrameLayout中全部的控件都在界面的左上側,后绘制的空间会覆盖之前的控件.布局内控件以层叠方式显示,用在游戏开发方面可能多些. 1.层叠展示 以下这个样例 ...
- HDU ACM 1290 献给杭电五十周年校庆的礼物
解析: 1.n条直线把平面切割成的区域数为: f(n)=f(n-1)+n=n(n+1)/2+1; 2.把空间切割为最多区域数的时候,第n个平面与前(n-1)个平面相交.且无三面共线,因此该平面与前(n ...
- Android图表日历控件组件
1.图表引擎 - AChartEngine AChartEngine是一款基于Android的图表绘制引擎,它为Android开发人员提供了非常多有用的图表绘制工具类,假设你须要在Android应用中 ...
- 网络爬虫WebCrawler（1）-Http网页内容抓取
在windows在下面C++由Http协议抓取网页的内容: 首先介绍了两个重要的包(平时linux在开源包,在windows下一个被称为动态链接库dll):curl包和pthreads_dll,其中c ...
- 小丁带你走进git的世界三-撤销修改（转）
一.撤销指令 git checkout还原工作区的功能 git reset 还原暂存区的功能 git clean 还没有被添加进暂存区的文件也就是git还没有跟踪的文件可以使用这个命令清除他们 g ...
- Spring面试问答Top 25
欢迎大家向我推荐你在面试过程中遇到关于Spring的问题. 我会把大家推荐的问题加入到以下的Spring经常使用面试题清单中供大家參考. 问题清单: 什么是Spring框架?Spring框架有哪些主要 ...
- ubuntu经常使用的命令摘要
1.df命令 # df -ha 显示所有文件和分区的使用 # df -h /dev/sda1 显示sda1磁盘使用率 # df -T 显示文件系统名称属于每个分区.区的格式类型(比方ext3) 注:h ...
- Oracle 11g+oracle客户端（32位）+PL/SQL develepment的安装配置
之前一直想学Oracle,可是就是安装配置Oracle一直未成功,让人很苦恼,特别是什么监听器什么的,一直没搞明白,弄了整整一天都没弄出来,上网查资料后发现资料上大多数都是参差不齐,不太详细明了,尝试 ...
- Xamarin.Forms 初探
什么是 Xamarin Forms ? Xamarin Forms 是一个高效创建跨平台用户界面的库 .通过Xamarin Forms 能够一次编码生成基于主流移动平台(iOS, Android, W ...
- [TroubleShooting] The remote copy of database xx has not been rolled forward to a point in time
Steps: 1. backup database TestMirror on Pricipal server 2. backup database log of TestMirror on Pric ...