zoukankan      html  css  js  c++  java
  • 小强的HTML5移动开发之路(53)——jQueryMobile页面间参数传递

    在单页模版中使用基于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>
    





  • 相关阅读:
    电商第一季函数笔记(1)
    沈逸老师PHP魔鬼特训笔记(2)
    PHP读书笔记(3)-常量
    2015/8/9 到家了,学完了CodeCademy的Python
    2015/8/4 告别飞思卡尔,抛下包袱上路
    2015/6/23 浪潮过去,我才来
    方维团购系统二次开发,项目经验
    方维团购系统整合云短信网短信平台,方维系统整合短信平台
    方维团购系统,下订单保存多个收货地址
    PHP木马查杀文件,木马查杀插件
  • 原文地址:https://www.cnblogs.com/lanzhi/p/6468996.html
Copyright © 2011-2022 走看看