小强的HTML5移动开发之路(53)——jQueryMobile页面间参数传递
来源:互联网 发布:lol安静苦笑淘宝 编辑:程序博客网 时间:2024/05/02 00:21
在单页模版中使用基于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>
12 0
- 小强的HTML5移动开发之路(53)——jQueryMobile页面间参数传递
- 小强的HTML5移动开发之路(53)——jQueryMobile页面间参数传递
- 小强的HTML5移动开发之路(50)——jquerymobile页面初始化过程
- HTML5移动开发之路 jQueryMobile页面间参数传递
- HTML5移动开发之路 jQueryMobile页面间参数传递
- 小强的HTML5移动开发之路(51)——jquerymobile中改善页面访问速度
- 小强的HTML5移动开发之路(44)——JqueryMobile中的按钮
- 小强的HTML5移动开发之路(44)——JqueryMobile中的按钮
- 小强的HTML5移动开发之路(43)——JqueryMobile页眉、工具栏和标签栏导航
- 小强的HTML5移动开发之路(52)——jquerymobile中的触控交互
- 小强的HTML5移动开发之路(52)——jquerymobile中的触控交互
- 小强的HTML5移动开发之路(49)——HTML5开发神器HBuilder
- 小强的HTML5移动开发之路(49)——HTML5开发神器HBuilder
- 小强的HTML5移动开发之路(47)——jquery mobile基本的页面框架
- 小强的HTML5移动开发之路(2)——HTML5的新特性
- 小强的HTML5移动开发之路(2)——HTML5的新特性
- 小强的HTML5移动开发之路(2)——HTML5的新特性
- 小强的HTML5移动开发之路(3)——HTML5与HTML4比较
- 关闭Eclipse光标悬浮自动提示
- Android布局中实现圆角边框
- Magento 快速保存产品属性的代码 - 不能更新flat表
- 中共中央总书记、国家主席
- Stanford概率图模型(Probabilistic Graphical Model)— 第一讲 贝叶斯网络基础
- 小强的HTML5移动开发之路(53)——jQueryMobile页面间参数传递
- Linux服务器间文件传输
- JAVA中JAVA_HOME与CLASSPATH的解析(转载与合成)
- destoon产品总数,求购总数,供应总数的标注显示
- C#事件的发送方和接收方(订阅方)
- Xcode开发插件利器合集
- C++编程(一)进制数换算、存储单位
- A8架构下CPSR说明
- Oracle开发与管理