Xiaoqiang의 HTML5 모바일 개발로의 길(53) - jQueryMobile 페이지 간 매개변수 전달
- 黄舟원래의
- 2017-02-15 14:03:181955검색
단일 페이지 템플릿에서는 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('[?&]' + 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>
참고: 접근 중인 페이지가 외부 링크 형식 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">
$('#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>위는 Xiaoqiang의 HTML5 모바일 개발 로드(53) - jQueryMobile 페이지 간 매개변수 전송 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!