ホームページ > 記事 > ウェブフロントエンド > Xiaoqiang の HTML5 モバイル開発ロード (53) - jQueryMobile ページ間のパラメータの受け渡し
Xiaoqiang の HTML5 モバイル開発ロード (53) - jQueryMobile ページ間のパラメータの受け渡し
- 黄舟オリジナル
- 2017-02-15 14:03:181937ブラウズ
単一ページのテンプレートでは、POST および GET リクエストを通じてパラメーターを渡すために HTTP ベースのメソッドが使用されますが、複数ページのテンプレートでは、通常、サーバーと通信する必要はありません。ページ間のパラメータ転送を実現するには、次の 3 つの方法があります。
1. GET メソッド: 前のページでパラメータを生成して次のページに渡し、次のページで GET コンテンツの解析を実行します。
2. HTML5 Web ストレージを通過するパラメーター。
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 Web Storage 機能を通過するパラメーター
通常、SessionStorage はセッションレベルのストレージであるため、ブラウザーが閉じられると、2 つの部分で構成されます。すべてのコンテンツが消えてしまいます。 localStorage は、従来の HTML 開発における Cookie の使用と同様に、永続ストレージに基づいています。localStorage 内のコンテンツは、積極的に削除されない限り削除されません。
ブラウザが Web ストレージ機能をサポートしていることを確認してください:
<!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 中国語 Web サイト (www.php.cn) に注目してください。