萧墙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 ...
随机推荐
- 【MySQL笔记】mysql来源安装/配置步骤和支持中国gbk/gb2312编码配置
不久的学习笔记.分享.我想有很大的帮助谁刚开始学习其他人的 备注:该票据于mysql-5.1.73版本号例如 1. mysql源代码编译/安装步骤 1) 官网下载mysql源代码并解压 2) cd至源 ...
- Balanced Binary Tree（Java代码没有结束，是什么原因？？？）
Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...
- 熟人Dubbo 系列1-Dubbo什么
Dubbo阿里巴巴内部SOA治理方案和服务的核心框架.每天2000+ 个服务提供3,000,000,000+ 次訪问量支持,并被广泛应用于阿里巴巴集团的各成员网站.Dubbo自2011年开源后,已被很 ...
- NSIS：简单按钮美化插件SkinButton，支持透明PNG图片。
原文 NSIS:简单按钮美化插件SkinButton,支持透明PNG图片. 征得作者贾可的同意,特发布按钮美化插件SkinButton. 插件说明: 使用GDI+库写的一个简单按钮美化插件,支持透明P ...
- [程序安装包制作] Advanced Installer 备忘
原文:[程序安装包制作] Advanced Installer 备忘 Product Information - Product Details 这个重点是Product Version.讲这个之前, ...
- hive建表没使用LZO存储格式，可是数据是LZO格式时遇到的问题
今天微博大数据平台发邮件来说.他们有一个hql执行失败.可是从gateway上面的日志看不出来是什么原因导致的,我帮忙看了一下.最后找到了问题的解决办法,下面是分析过程: 1.执行失败的hql: IN ...
- Oracle 实现 mysql 的 find_in_set 排序！
oracle 实现类似MYSQL的 find_in_set 排序,函数 decode: select * from tb_info_game where gameid in(23,20,19,26,1 ...
- jQuery.reveal弹出层使用
最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说了算. 这个插件是基于Jquery实现 ...
- java多线程检测可用IP
最近有一个问题进行系统性能优化的时候来到.解析分享给大家后,. 我们socket当建立连接,假设我们不能将计算机连接到指定的站点,那么这将导致系统卡socket的connect在此方法. 我们都知道s ...
- c语言获取符号位整数和浮点
1. 为什么你应该得到的签位 非常多的时间,我们需要推断的数目值正和负,做了相应的逻辑处理.完成这一要求条件推断语句可以很好. 有时会出现以下情况, if (x > 0) { x = x - 1 ...