Maison >interface Web >Tutoriel H5 >Route de développement mobile HTML5 de Xiaoqiang (53) - passage de paramètres entre les pages jQueryMobile

Route de développement mobile HTML5 de Xiaoqiang (53) - passage de paramètres entre les pages jQueryMobile

黄舟original: 2017-02-15 14:03:181960parcourir

Dans les modèles à page unique, des méthodes basées sur HTTP sont utilisées pour transmettre les paramètres via les requêtes POST et GET, tandis que dans les modèles à plusieurs pages, il n'est pas nécessaire de communiquer avec le serveur. Habituellement, dans les modèles à plusieurs pages, il n'y a pas besoin de communiquer avec le serveur. sont les trois méthodes suivantes pour réaliser la communication inter-pages.

1. Méthode GET : générez des paramètres sur la page précédente et transmettez-les à la page suivante, puis effectuez une analyse du contenu GET sur la page suivante.

2. Transmettez les paramètres via le stockage Web HTML5.

3. Créez la variable de la page actuelle, attribuez le contenu du paramètre à transmettre à la variable de la page précédente et retirez les paramètres de la variable de la page suivante. (La flexibilité du programme est faible)

1. Implémentez le transfert de paramètres entre les pages à l'aide de la méthode 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(&#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>

Remarque : Il est nécessaire d'indiquer que la page consultée est au format lien externe rel="external", sinon le transfert de paramètres entre les pages ne peut pas s'effectuer normalement.

2. Paramètre passant par les fonctionnalités de stockage Web HTML5

Se compose généralement de deux parties. SessionStorage stocke le contenu de stockage dans le navigateur sous la forme d'une session. Quand Après la fermeture du navigateur, tout le contenu de sessionStorage disparaîtra. localStorage est basé sur un stockage persistant, similaire à l'utilisation de cookies dans le développement HTML traditionnel, à moins que le contenu de localStorage ne soit activement supprimé, il ne sera pas supprimé.

Vérifiez que le navigateur prend en charge la fonctionnalité 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>

Habituellement, lors de l'implémentation du passage de paramètres entre les pages dans jQuery Mobile, nous n'utilisons pas localStorage mais utilisez sessionStorage car il n'a pas besoin d'être conservé localement.

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

Ce qui précède est le contenu de la route de développement mobile HTML5 de Xiaoqiang (53) - transfert de paramètres entre les pages jQueryMobile. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn). !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Route de développement mobile HTML5 de Xiaoqiang (52) - interaction tactile dans jquerymobileArticle suivant：Route de développement mobile HTML5 de Xiaoqiang (52) - interaction tactile dans jquerymobile

Articles Liés

Voir plus