Xiaoqiang의 HTML5 모바일 개발로의 길(53) - jQueryMobile 페이지 간 매개변수 전달-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

Xiaoqiang의 HTML5 모바일 개발로의 길(53) - jQueryMobile 페이지 간 매개변수 전달

黄舟

Feb 15, 2017 pm 02:03 PM

단일 페이지 템플릿에서는 HTTP 기반 메서드를 사용하여 POST 및 GET 요청을 통해 매개변수를 전달하는 반면, 다중 페이지 템플릿에서는 일반적으로 서버와 통신할 필요가 없습니다. 페이지 간 통신을 수행하는 방법에는 다음 세 가지가 있습니다.

1. GET 방식: 이전 페이지에서 매개변수를 생성하여 다음 페이지로 전달한 후 다음 페이지에서 GET 콘텐츠 구문 분석을 수행합니다.

2. HTML5 웹 저장소를 통해 매개변수를 전달합니다.

3. 현재 페이지 변수를 생성하고, 이전 페이지의 변수에 전달할 매개변수 내용을 할당한 후, 다음 페이지의 변수에서 매개변수를 꺼냅니다. (프로그램 유연성이 약함)

1. 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>

로그인 후 복사

참고: 접근 중인 페이지가 외부 링크 형식 rel="external"임을 나타내기 위해 필요합니다. 그렇지 않으면 페이지 간 매개변수 전송이 정상적으로 수행될 수 없습니다.

2. HTML5 웹 스토리지 기능을 통한 매개변수 전달

일반적으로 SessionStorage는 세션 수준의 스토리지이므로 브라우저에 저장 내용을 저장합니다. 브라우저가 닫히면 sessionStorage의 모든 콘텐츠가 사라집니다. localStorage는 기존 HTML 개발에서 쿠키를 사용하는 것과 유사한 영구 저장소를 기반으로 합니다. 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">
	$(&#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>

로그인 후 복사

위는 Xiaoqiang의 HTML5 모바일 개발 로드(53) - jQueryMobile 페이지 간 매개변수 전송 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.