Home >Web Front-end >H5 Tutorial >Xiaoqiang's road to HTML5 mobile development (53) - parameter passing between jQueryMobile pages

Xiaoqiang's road to HTML5 mobile development (53) - parameter passing between jQueryMobile pages

黄舟Original: 2017-02-15 14:03:182017browse

In single-page templates, HTTP-based methods are used to pass parameters through POST and GET requests, but in multi-page templates, there is no need to communicate with the server. Usually, in multi-page templates, there are the following three methods to achieve inter-page communication. Parameter passing.

1. GET method: Generate parameters on the previous page and pass them to the next page, and then parse the GET content on the next page.

2. Pass parameters through HTML5 Web Storage.

3. Create the current page variable, assign the parameter content to be passed to the variable on the previous page, and take the parameters out of the variable on the subsequent page. (Program flexibility is weak)

1. Use GET method to transfer parameters between pages

<!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(&#39;[?&]&#39; + name + &#39;=([^&]*)&#39;).exec(window.location.search);
		return match && decodeURIComponent(match[1].replace(/\+/g, &#39; &#39;));
	}
	$(&#39;#page_Parameter1&#39;).live(&#39;pageshow&#39;,  function(event, ui){
		alert("第二个页面的参数：" + getParameterByName(&#39;parameter&#39;));
	});
</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>

Note: It is necessary to indicate that the page being accessed is in the external link format rel="external", otherwise the parameter transfer between pages cannot be performed normally.

2. Parameter passing through HTML5 Web Storage features

Usually consists of two parts. SessionStorage stores the storage content in the browser in the form of a session. Since it is session-level storage, when After the browser is closed, all contents in sessionStorage will disappear. localStorage is based on persistent storage, similar to the use of cookies in traditional HTML development. Unless the content in localStorage is actively deleted, it will not be deleted.

Check that the browser supports the Web Storage feature:

<!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>

Usually, when implementing parameter passing between pages in jQuery Mobile, we do not use localStorage but use sessionStorage, because it does not need to be persisted locally.

<!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">
	$(&#39;#page_Parameter1&#39;).live(&#39;pageshow&#39;, 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>

The above is the content of Xiaoqiang's HTML5 mobile development road (53) - parameter transfer between jQueryMobile pages. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Xiaoqiang’s HTML5 mobile development road (52) - touch interaction in jquerymobileNext article：Xiaoqiang’s HTML5 mobile development road (52) - touch interaction in jquerymobile

See more

Xiaoqiang's road to HTML5 mobile development (53) - parameter passing between jQueryMobile pages

Related articles