萧墙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 ...
随机推荐
- epoll()无论涉及wait队列分析
事件1. epfd-file->eventpoll->wq: struct eventpoll { ... wait_queue_head_t wq; //用于ep ...
- nodejs 递归创建目录
nodejs没有递归创建目录的方法,以前创建的时候是将目录通过path.sep,然后再一步步判断,这个方法在windows下面遇到盘符的时候,然后蛋疼了.今天又用到了这个功能,突然想到了另外一种方法, ...
- Java Web整合开发(14) -- Struts 1.x 概述
整合Spring与Struts1的三种方法总结 无论用那种方法来整合,第一步就是要装载spring的应用环境,有三种方式: #1. struts-config.xml <?xml version ...
- bonecp使用数据源
bonecp.properties jdbc.driverClass=oracle.jdbc.driver.OracleDriver jdbc.jdbcUrl=jdbc:oracle:thin:@19 ...
- 移动端 rem字体的使用demo
<!doctype html> <html> <head> <meta charset="utf-8"> <title ...
- gradle--java入门(转)
7.3.3 项目之间的依赖性 您可以添加项目之间的依赖性在相同的构建,所以,例如,这个一个项目的JAR文件是用来编译另一个项目,在api构建文件我们将添加一个依赖JAR产生的共享项目.由于这种依赖性, ...
- 经验36--C#无名（大事，物...）
有时候,方便代码,它会使用匿名的东西. 1.匿名事件 args.CookieGot += (s, e) => { this ...
- 章节2：SQL之多表连接
原文:章节2:SQL之多表连接 Sql的多表连接关系有:内连接.外连接和交叉连接. 先建立两个用于演示的表: TB_Characters: Id Character 1 内向 2 外向 3 中性性格 ...
- hexo 部署至Git遇到的坑
查找资料的时候发现了next这个博客主题,next!非常的漂亮,顺手查看了hexo的相关部署. Hexo官方介绍 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲 ...
- Properties类读写.properties配置文件
package com.hzk.utils; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFo ...