小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递

在单页模版中使用基于HTTP的方式通过POST和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>
	 	<p class="content" data-role="content">
	 		<p>传递参数进入下一页，以Alert方式显示参数内容。<br/>
	 传递参数进入<a href="?parameter=4321#page_Parameter1" rel="external">下一页</a><br/>
	 		</p>
	 	</p>
	 </section>
	 <section id="page_Parameter1" data-role="page">
	 	<header data-role="header">
	 		<h1>页面参数传递</h1>
	 	</header>
	 	<p class="content" data-role="content">
	 		<p>通过Alert显示前一个界面参数。<br/> 
	 		<a href="#page_Parameter0">返回</a></p>
	 	</p>
	 </section>
</body>
</html>

<!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>
		<p class="content" data-role="content">
			<p>传递参数进入下一页，以Alert方式显示参数内容。<br/>
			传递参数进入<a href="#page_Parameter1" onclick="sessionStorage.id=4321">下一页</a><br/>
			</p>
		</p>
	</section>
	<section id="page_Parameter1" data-role="page">
		<header data-role="header">
			<h1>页面参数传递</h1>
		</header>
		<p class="content" data-role="content">
			<p>通过Alert显示来自前一个界面的参数。<br/>
				<a href="#page_Parameter0">返回</a>
			</p>
		</p>
	</section>
</body>
</html>

以上就是小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递的内容，更多相关内容请关注PHP中文网（HdhCmsTestgxlcms测试数据）！

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did65678

更新时间：2022-10-13 阅读：46次