使用jQuery Mobile在页面之间传递参数
[英]Pass parameter between pages using jquery mobile
问题描述
What is the right way to pass parameters between pages in jquery mobile. 
在jquery mobile中的页面之间传递参数的正确方法是什么。 In Q&A of jquery mobile, there is some suggestion for plugin. 在jquery mobile的问答中，对插件有一些建议。 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. 我必须为页面中的所有链接传递参数。
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
2 个解决方案
解决方案1
18 已采纳 2013-05-13 09:39:21
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 index.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 second.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. 或者，您可以创建一个持久性javascript对象以用于存储。 As long ajax is used for page loading (and page is not reloaded in any way) that object will stay active. 只要使用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'));
});
prevPage object holds a complete previous page. prevPage对象保存完整的上一页。
Solution 4: 解决方案4：
As a last solution we have a nifty HTML implementation of localStorage. 作为最后的解决方案，我们有一个很棒的localStorage HTML实现。 It only works with HTML5 browsers (including Android and iOS browsers) but all stored data is persistent through page refresh. 它仅适用于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. 您将找到带有示例的几种解决方案。
解决方案2
3 2013-08-27 10:36:10
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 :-) 在我的情况下，structure ='123'是动态创建的，没有人为动态目的而写固定值'123'：-)
Thanks for the URL-splitting of the above post (pls. favor his post), this is just an addition / further explanation. 感谢上述帖子的URL拆分（请支持他的帖子），这只是一个补充/进一步的解释。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.