如何在JQuery Mobile中更改页面时传递参数?
我搜索了stackoverflow,但没有找到一个合适的解决方案来以编程方式更改jqm页面并传递一个(get)参数。 我是jqm的新手,所以也许我在使用changePage()函数传递数据时出错了。
使用jquery mobile 1.1.1和jquery 1.8.0
我有一个列表,并希望所有项目都指向相同的#profile页面。 在那个页面上,我想用ajax / json加载适当的数据。
第一个链接工作,但没有id通过(显然)
第二个链接不工作抛出exception(在chrome中):未捕获错误:语法错误,无法识别的表达式:#profile?id = 3
第三个链接使用此function:
function changePage() { $.mobile.changePage("#profile", { data: {id:1} }); //alert('page changed.'); return false; }
它会更改页面但url是basefile.html?id = 1但它应该是basefile.html #profile?id = 1
任何人都可以帮忙吗? 非常感谢。
正如jQuery Mobile Docs中所提到的,jQuery Mobile不支持将查询参数传递给内部/嵌入页面,但有两个插件可以添加到项目中以支持此function。 有一个轻量级页面params插件和一个function更全面的jQuery Mobile路由器插件 ,可与backbone.js或spine.js一起使用。
还有其他方法可以在不同的页面中实现数据传递,但旧的Web浏览器可能不支持其中一些。 您必须仔细选择实施方式,以免影响应用程序在多个浏览器上的互操作性。
您可以使用Web存储在不同页面之间传递数据。
如W3schools网站所述,HTML5网页可以在用户的浏览器中本地存储数据。 早些时候,这是用cookies完成的。 但是, Web存储更安全,更快捷。 每个服务器请求都不包含这些数据,但仅在被要求时使用。 还可以存储大量数据,而不会影响网站的性能。 数据存储在键/值对中,并且网页只能访问自己存储的数据。 Internet Explorer 8 +,Firefox,Opera,Chrome和Safari支持Web存储。 Internet Explorer 7及更早版本不支持Web存储 。
有两个对象用于在客户端上存储数据:
- localStorage存储没有过期日期的数据
- sessionStorage存储一个会话的数据
例子:
本地存储示例:
在Page1:localStorage.carType =“test”;
在Page2中,您可以使用:localStorage.carType检索carType
会话存储示例:
在Page1:sessionStorage.carNumber = 10;
在Page2中,您可以使用:sessionStorage.carNumber检索carType
关于您的情况,可能的解决方案是在每个锚中添加ID。 然后捕获click事件,检索id,将id保存在Web存储中并执行页面转换。 在下一页中,从Web存储中检索id。 您可以在下面找到实施方案:
$('#menu_list').children().each(function(){ var anchor = $(this).find('a'); if(anchor) { anchor.click(function(){ // save the selected id to the session storage and retrieve it in the next page sessionStorage.selectedId=anchor.attr('id'); // perform the transition changePage(); }); } });
编辑:
遵循多页方法时传递参数的替代方法
此示例使用jQM changePage()
来发送带有Ajax页面请求的数据。
$('#list-d a').on('click', function(e) { e.preventDefault(); $.mobile.changePage('car-details.html', { data: { id: this.id } }); });
构造的URL是… / car-details.html?id = my-id
有关完整示例,请检查此StackOverflow答案
我希望这可以帮助你。
我看到这个问题已经得到解答,评论被回答了,我也遇到了这个问题。 使用jQuery Mobile可以实现ajax加载,因此除非用户发起,否则不需要浏览器刷新,对吗? 如果某个用户由于某种原因而刷新,则意味着该网站或应用程序的运行方式不会被检测到,因为大多数用户在没有令人沮丧的原因的情况下无法刷新。
这样说,正如评论所建议的,创建变量是将数据从“页面”传递到“页面”的有效方式。 但是,我这样做的建议是创建一个全局变量来包含站点信息。
$('#elemControlToChangeBy').on("tap", function(oEvent) { oMyNameSpace.PageDataObj = oDataObj; $.mobile.changePage("#elemPage", {transition : "type"}) }); $("elemPage").on("pageshow", function() { var oDataObj = oMyNamespance.PageDataObj; //Use the data... });
显然,代码必须修改为您的编码约定,但概念是:
- 存储您的数据或通过其他方式访问它
- 将数据放在包含的变量中以防止外部代码覆盖任何内容
- 到达下一页时访问数据对象变量
还有其他路线,如前所述(本地存储等),所以我不会接触到,因为信息已经存在。
如上所述,我遇到了这个问题,我的建议是按照预期使用jQuery Mobile,并使用自己的代码库来使用有组织的对象层次结构创建和存储变量。 你如何组织它是你的选择,这正是使javascript成为一种奇妙语言的原因。
我们过于依赖图书馆来解决作者留给我们使用我们的创造性和个人标准驱动方法解决的简单问题。 快乐编码给所有人,鼓励建立,而不仅仅是设计!