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>
    





  • 相关阅读:
    常见寻找OEP脱壳的方法
    Windows内核原理系列01
    HDU 1025 Constructing Roads In JGShining's Kingdom
    HDU 1024 Max Sum Plus Plus
    HDU 1003 Max Sum
    HDU 1019 Least Common Multiple
    HDU 1018 Big Number
    HDU 1014 Uniform Generator
    HDU 1012 u Calculate e
    HDU 1005 Number Sequence
  • 原文地址:https://www.cnblogs.com/lanzhi/p/6468996.html
Copyright © 2011-2022 走看看