JQuery Mobile 页面参数传递(转)
在单页模版中使用基于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 页面参数传递(转)的更多相关文章
- JQuery Mobile 页面参数传递
在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...
- [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布
[ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局 当我们专注地研究人类生活的空虚,并考虑荣华富贵空幻无常时,或许我们正在阿谀逢迎自己懒惰的天 ...
- (二)Jquery Mobile介绍以及Jquery Mobile页面与对话框
Jquery Mobile介绍以及Jquery Mobile页面与对话框 一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地 ...
- jQuery Mobile 页面事件
jQuery Mobile 页面事件 在 jQuery Mobile 中与页面打交道的事件被分为四类: Page Initialization - 在页面创建前,当页面创建时,以及在页面初始化之后 P ...
- 用谷歌浏览器Chrome浏览jQuery Mobile页面需要配置Tomcat服务器
在浏览jQuery Mobile 页面中,除了 Chrome浏览器出错外,其他的浏览器都ok: 这里,是因为需要单独配置 Tomcat 服务: 1.先配置java jdk: 2.下载,安装,配置,To ...
- 02.Jquery Mobile介绍以及Jquery Mobile页面与对话框
一.为什么要学Jquery Mobile JqueryMobile 是jquery的移动版本,懂基本的jquery知识,会简单的html+css就可以完成很多复杂的功能,还有就是这个框架在企业中用 ...
- jQuery Mobile页面跳转切换的几种方式
jQuery Mobile在移动开发中越来越受到欢迎. 而他的各个版本号也在持续不断的更新中.相同的我也非常喜欢它,它加快了我们开发HTML5的速度. 同一时候又具备jQuery一样的操作方法. 学起 ...
- jquery mobile页面跳转缓存问题解决
最近,我的一个写后端的同事因为缺前端自己做起了前端的活儿,因为对前端的不熟悉,找寻了一些现成框架想轻松了事,做一个web app他选了jquery mobile,开发效率确实高,但是这个框架的一些坑也 ...
- jQuery Mobile页面返回无需重新get
最近公司的web app项目,使得我有幸一直接触和学习jQuery Mobile.这确实是一个很不错的移动开发库,有助于擅长web开发的工程师,快速入门并构建自己的移动应用.但是在前两天,我碰到了一个 ...
随机推荐
- DHCP服务器安装及配置
一.什么是DHCP? DHCP (Dynamic Host Configuration protocol)动态主机设置协议,基于UDP(发送很小的数据报文,且对时效性要求较高)协议通信. 它是C/S架 ...
- uva 10622
http://vjudge.net/contest/140673#problem/H 求某个数字(最大到10^9,可为负值)写成完全p次方数的指数p是多少 分析: 先进行唯一分解,之后p整除各个素因子 ...
- JavaWeb用Jdbc操作MySql数据库(二)
一.仍然使用前面的环境和示例数据库. 二.建立发出注册请求的页面index3.jsp. <%@ page language="java" import="java. ...
- Oracle 学习之路开始
今年刚毕业,从毕业到现在工作正式工作四个多月了(实习的几个月就不算了).工作之中遇到的困难不少,学到的东西也不少:但是感觉学到的东西还是不够,毕竟java水很深啊. 现在工作中并不是每天都能学到新的东 ...
- 【freemaker】之文本,html文本,去除空格,字母大小写,循环数组,字符串截取,map取值,遍历map
测试代码 @Test public void test06(){ try { root.put("emp", "<span color='red'>你好张三& ...
- Charles V4系列更新 | 绿色特别版 | 视频教程
Charles V4.0 视频教程 http://www.cnblogs.com/weimjsam/p/5841816.html Charles V4系列 绿色特别版,解压密码:博客名 链接: htt ...
- [内核]Linux workqueue
转自:http://blog.chinaunix.net/uid-24148050-id-296982.html 一.workqueue简介workqueue与tasklet类似,都是允许内核代码请求 ...
- Spark往Elasticsearch读写数据
def main(args: Array[String]): Unit = { val sparkConf = new SparkConf().setAppName("DecisionTre ...
- NBU AIX ORACLE10G RAC恢复到AIX单实例(表空间恢复)
ln -s /usr/openv/netbackup/bin/libobk.a64 /oraclev3/product/10.2.0/lib/libobk.a不建软连接会报如下错误: using ta ...
- ios系统的中arm指令集
arm结构处理器,几乎所有的手机都基于arm,其在嵌入式系统中应用非常广泛. ARM 处理器因为低功耗和小尺寸而闻名,它的性能在同等功耗的产品中也很出色.这里我们注意一点,模拟器并不运行arm代码,软 ...