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开发的工程师,快速入门并构建自己的移动应用.但是在前两天,我碰到了一个 ...
随机推荐
- Squid configuration directives 3.0
WELCOME TO SQUID 3.0.STABLE25-20100412 ---------------------------- This is the default Squid config ...
- 黑马程序员——JAVA基础之网络编程
------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- 网络编程 网络模型:OSI参考模型和TCP/IP参考模型 网络通讯三要素: IP地址:InetA ...
- msp430FR5739 FRAM的学习
FRAM,中文名称为铁电存储器..FRAM提供一种与RAM一致的性能,但又有与ROM 一样的非易失性. FRAM 克服以上二种记忆体的缺陷并合并它们的优点,它是全新创造的产品,一个非易失性随机存取储存 ...
- maven 几个插件的使用
1. compile <plugin> <artifactId>maven-compiler-plugin</artifactId> <configurat ...
- 一些鲜为人知却非常实用的数据结构 - Haippy
原文:http://www.udpwork.com/item/9932.html 作为程序猿(媛),你必须熟知一些常见的数据结构,比如栈.队列.字符串.链表.二叉树.哈希,但是除了这些常见的数据结构以 ...
- 【C】 02 - 程序结构和预处理
在正式进入C的语法之前,有必要对其整体外观和组成元素作一个浏览.这部分内容对大多数人是比较陌生的,但它们却是C的起点和骨架.而这些内容涉及的背景或细节又可以展开为专门的课题,这里也只是浅尝则止,说明个 ...
- 使Maven 2在package、install等阶段跳过运行Test的配置
方法1: To skip running the tests for a particular project, set the skipTests property to true.<proj ...
- 观察者模式及Java实现例子
http://www.cnblogs.com/mengdd/archive/2013/02/07/2908929.html 观察者模式 观察者模式 Observer 观察者模式定义了一种一对多的依赖关 ...
- Application Loader上传app程序
提示:如果您安装了XCode开发环境.在/Applications/XCode.app/Contents/Applications目录中可以找到Application Loader(右键XCode选择 ...
- 大师教你<部落冲突>如何切换账号
前提申请两个谷歌账号,账号一和账号二,想要切换账号,只需清除部落冲突在手机上的数据即可.详情请看下文! 1. 第一次登陆,进入游戏后 2. 没有谷歌商店的童鞋,下载谷歌安装器(一键修复)以及VPNFQ ...