在Jquery中,在两个页面之间传递参数的最佳方法是什么?
假设我有一个page1.html和page2.html@H_403_3@
我想将参数id从page1传递给page2.@H_403_3@
这样做的最佳方式是什么?@H_403_3@
我目前使用:@H_403_3@
$.mobile.navigate(“#workOrderDetailsPage?id =”woId);@H_403_3@
解决方法
页面转换之间的数据/参数操作
在页面转换期间,可以从一个页面向另一个页面发送参数.它可以通过几种方式完成.@H_403_3@
参考:https://stackoverflow.com/a/13932240/1848600@H_403_3@
您可以使用changePage传递值:@H_403_3@
$.mobile.changePage('page2.html',{ dataUrl : "page2.html?paremeter=123",data : { 'paremeter' : '123' },reloadPage : true,changeHash : true });
并按如下方式阅读:@H_403_3@
$(document).on('pagebeforeshow',"#index",function (event,data) { var parameters = $(this).data("url").split("?")[1];; parameter = parameters.replace("parameter=",""); alert(parameter); });
[实施例] [3]:@H_403_3@
的index.html@H_403_3@
<!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',function () { $(document).on('click',"#changePage",function () { $.mobile.changePage('second.html',{ dataUrl : "second.html?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@H_403_3@
<!DOCTYPE html> <html> <head> <Meta charset="utf-8" /> <Meta name="viewport" content="widdiv=device-widdiv,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>
或者,您可以为存储目的创建持久性javascript对象.由于ajax用于页面加载(并且页面不以任何方式重新加载),该对象将保持活动状态.@H_403_3@
var storeObject = { firstname : '',lastname : '' }
示例:http://jsfiddle.net/Gajotres/9KKbx/@H_403_3@
$('#index').live('pagebeforeshow',function (e,data) { alert(data.prevPage.attr('id')); });
作为最后的解决方案,我们有一个漂亮的localStorage HTML实现.它仅适用于HTML5浏览器(包括Android和iOS浏览器),但所有存储的数据都通过页面刷新保持不变.@H_403_3@
if(typeof(Storage)!=="undefined") { localStorage.firstname="Dragan"; localStorage.lastname="Gaic"; }