在JQuery Mobile中两个不同文件中的两个页面之间传递参数 [英] pass parameters between two pages in two different files in JQuery Mobile
问题描述
在Jquery的两个页面之间传递参数的最佳方式是什么?
what is the best way for me to pass parameters between two pages in Jquery ?.
假设我有一个page1.html和page2.html
Let's say I have a page1.html and page2.html
，我想将参数id从page1传递给page2.
and I want to pass the parameter id from page1 to page2.
做到这一点的最好方法是什么?
What is the best way of doing this ?.
我当前正在使用:
$.mobile.navigate(#workOrderDetailsPage?id =" + woId);
$.mobile.navigate("#workOrderDetailsPage?id=" + woId);
但是用于单个页面中的两个页面.但是，如何使用JQuery Mobile在两个单独的文件中对两个页面执行此操作?
but that's for a two pages within the single page. But how can I do this for two pages in two separate files using JQuery Mobile ?.
推荐答案
页面转换之间的数据/参数操作
可以在页面转换期间将参数从一页发送到另一页.可以通过几种方法完成.
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.
参考: https://stackoverflow.com/a/13932240/1848600
解决方案1:
您可以使用changePage传递值:
You can pass values with changePage:
$.mobile.changePage('page2.html', { dataUrl : "page2.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true });
并像这样阅读它们:
$(document).on('pagebeforeshow', "#index", function (event, data) {
var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("parameter=","");
alert(parameter);
});
[示例] [3]:
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
<!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>
解决方案2:
或者您可以创建一个持久性javascript对象以用于存储.只要使用ajax进行页面加载(并且不会以任何方式重新加载页面)，该对象就会保持活动状态.
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.
var storeObject = {
firstname : '',
lastname : ''
}
示例: http://jsfiddle.net/Gajotres/9KKbx/
解决方案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.
解决方案4:
作为最后一个解决方案，我们有一个很棒的localStorage HTML实现.它仅适用于HTML5浏览器(包括Android和iOS浏览器)，但所有存储的数据都可以通过页面刷新保持不变.
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.
if(typeof(Storage)!=="undefined") {
localStorage.firstname="Dragan";
localStorage.lastname="Gaic";
}
示例: http://jsfiddle.net/Gajotres/J9NTr/
有关此问题的更多信息，请参见我的博客文章.
More about this can be found in my blog article.
这篇关于在JQuery Mobile中两个不同文件中的两个页面之间传递参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
