使用 jquery mobile 在页面之间传递参数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16518912/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pass parameter between pages using jquery mobile
提问by user694688
What is the right way to pass parameters between pages in jquery mobile. In Q&A of jquery mobile, there is some suggestion for plugin. Is it mandatory? Please let me know the correct way. There is no one concrete answer. I have to pass parameters for all links in my page.
在 jquery mobile 中的页面之间传递参数的正确方法是什么。在jquery mobile的Q&A中，对插件有一些建议。是强制性的吗？请告诉我正确的方法。没有一个具体的答案。我必须为页面中的所有链接传递参数。
http://view.jquerymobile.com/master/demos/faq/pass-query-params-to-page.php
http://view.jquerymobile.com/master/demos/faq/pass-query-params-to-page.php
回答by Gajotres
Data/Parameters manipulation between page transitions
页面转换之间的数据/参数操作
It is possible to send a parameter/s from one page to another during page transition. It can be done in few ways.
可以在页面转换期间将参数从一个页面发送到另一个页面。它可以通过几种方式完成。
Reference: https://stackoverflow.com/a/13932240/1848600
参考：https: //stackoverflow.com/a/13932240/1848600
Solution 1:
解决方案1：
You can pass values with changePage:
您可以使用 changePage 传递值：
$.mobile.changePage('page2.html', { dataUrl : "page2.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true });
And read them like this:
并像这样阅读它们：
$(document).on('pagebeforeshow', "#index", function (event, data) {
var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("parameter=","");
alert(parameter);
});
[Example][3]:
[示例][3]：
index.html
索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pagebeforeshow', "#index",function () {
$(document).on('click', "#changePage",function () {
$.mobile.changePage('second.html', { dataUrl : "second.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : false, changeHash : true });
});
});
$(document).on('pagebeforeshow', "#second",function () {
var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("parameter=","");
alert(parameter);
});
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="index">
<div data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<a data-role="button" id="changePage">Test</a>
</div> <!--content-->
</div><!--page-->
</body>
</html>
second.html
第二个.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="second">
<div data-role="header">
<h3>
Second Page
</h3>
</div>
<div data-role="content">
</div> <!--content-->
</div><!--page-->
</body>
</html>
Solution 2:
解决方案2：
Or you can create a persistent javascript object for a storage purpose. As long ajax is used for page loading (and page is not reloaded in any way) that object will stay active.
或者您可以为存储目的创建一个持久的 javascript 对象。只要 ajax 用于页面加载（并且页面不会以任何方式重新加载），该对象将保持活动状态。
var storeObject = {
firstname : '',
lastname : ''
}
Example: http://jsfiddle.net/Gajotres/9KKbx/
示例：http: //jsfiddle.net/Gajotres/9KKbx/
Solution 3:
解决方案3：
You can also access data from the previous page like this:
您还可以从上一页访问数据，如下所示：
$('#index').live('pagebeforeshow', function (e, data) {
alert(data.prevPage.attr('id'));
});
prevPageobject holds a complete previous page.
prevPage对象保存完整的前一页。
Solution 4:
解决方案4：
As a last solution we have a nifty HTML implementation of localStorage. It only works with HTML5 browsers (including Android and iOS browsers) but all stored data is persistent through page refresh.
作为最后一个解决方案，我们有一个漂亮的 localStorage 的 HTML 实现。它仅适用于 HTML5 浏览器（包括 Android 和 iOS 浏览器），但所有存储的数据都通过页面刷新保持不变。
if(typeof(Storage)!=="undefined") {
localStorage.firstname="Dragan";
localStorage.lastname="Gaic";
}
Example: http://jsfiddle.net/Gajotres/J9NTr/
示例：http: //jsfiddle.net/Gajotres/J9NTr/
More info
更多信息
If you want to learn more about this topic take a look at this article. You will find several solutions with examples.
如果您想了解有关此主题的更多信息，请查看这篇文章。您将通过示例找到多种解决方案。
回答by dotchuZ
You can also use it with external relations in links (for me and my purpose its easier), so I wanted to share this:
您还可以将它与链接中的外部关系一起使用（对我和我的目的来说更容易），所以我想分享这个：
HTML:
HTML：
<a href="page1.htm?structure='123'">Structure</a>
JS:
JS：
$( document ).on( "pageinit", "#page1", function( event ) {
var parameters = $(this).data("url").split("?")[1];
parameter = parameters.replace("structure=","");
alert(parameter);
});
In my case, the structure='123' is created dynamically, nobody writes a fixed value '123' for dynamic purposes :-)
在我的情况下，结构='123'是动态创建的，没有人出于动态目的编写固定值'123':-)
Thanks for the URL-splitting of the above post (pls. favor his post), this is just an addition / further explanation.
感谢上述帖子的 URL 拆分（请支持他的帖子），这只是一个补充/进一步的解释。
