Heim > Artikel > Web-Frontend > Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (53) – Parameterübergabe zwischen jQueryMobile-Seiten

Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (53) – Parameterübergabe zwischen jQueryMobile-Seiten

黄舟Original: 2017-02-15 14:03:181740Durchsuche

In einseitigen Vorlagen werden HTTP-basierte Methoden verwendet, um Parameter über POST- und GET-Anfragen zu übergeben, während in mehrseitigen Vorlagen keine Kommunikation mit dem Server erforderlich ist sind die folgenden drei Methoden, um die Parameterübergabe zwischen Seiten zu erreichen.

1. GET-Methode: Generieren Sie Parameter auf der vorherigen Seite, übergeben Sie sie an die nächste Seite und führen Sie dann die GET-Inhaltsanalyse auf der nächsten Seite durch.

2. Übergeben Sie Parameter über den HTML5-Webspeicher.

3. Erstellen Sie die aktuelle Seitenvariable, weisen Sie den Parameterinhalt zu, der an die Variable auf der vorherigen Seite übergeben werden soll, und übernehmen Sie die Parameter aus der Variablen auf der nachfolgenden Seite. (Programmflexibilität ist schwach)

1. Parameterübertragung zwischen Seiten mithilfe der GET-Methode implementieren

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

Hinweis : Es muss angegeben werden, dass die Seite, auf die zugegriffen wird, im externen Linkformat rel="external" vorliegt, andernfalls kann die Parameterübertragung zwischen Seiten nicht normal durchgeführt werden.

2. Parameterübergabe durch HTML5-Webspeicherfunktionen

Besteht normalerweise aus zwei Teilen, da es sich um einen Speicher auf Sitzungsebene handelt. Wenn nach dem Schließen des Browsers alle Inhalte im SessionStorage verschwinden. localStorage basiert auf persistenter Speicherung, ähnlich der Verwendung von Cookies in der herkömmlichen HTML-Entwicklung. Sofern der Inhalt in localStorage nicht aktiv gelöscht wird, wird er nicht gelöscht.

Überprüfen Sie, ob der Browser die Web Storage-Funktion unterstützt:

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

Normalerweise verwenden wir bei der Implementierung der Parameterübergabe zwischen Seiten in jQuery Mobile keine localStorage, aber verwenden Sie sessionStorage, da es nicht lokal beibehalten werden muss.

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

Das Obige ist der Inhalt von Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (53) – Parameterübertragung zwischen jQueryMobile-Seiten. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn). !

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (52) – Berührungsinteraktion in jquerymobileNächster Artikel：Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (52) – Berührungsinteraktion in jquerymobile

In Verbindung stehende Artikel

Mehr sehen