如何在JQuery Mobile中更改页面时传递参数？

Question

我在stackoverflow周围搜索了一下，但没有找到一个合适的解决方案来以编程方式更改jqm页面并传递一个（get）参数。我是jqm的新手，所以可能我在使用change ePage（）函数传递数据时出错了。

使用jquery mobile 1.1.1和jquery 1.8.0

我有一个列表，希望所有项目都指向相同的#配置文件页面。在该页面上，我想用ajax/json加载适当的数据。

<ul data-role="listview" data-theme="a">
   <li><a href="#profile">Martin</a></li>
   <li><a href="#profile?id=2">Johnny</a></li>   
   <li><a href="#" onclick="changePage()">Luke</a></li>
</ul>

第一个链接工作，但没有通过id（显然）

第二个链接不工作抛出异常（在chrome中）：未捕获错误：语法错误，无法识别的表达式：#配置文件？id=3

第三个链接使用此功能：

function changePage() {
            $.mobile.changePage("#profile", { data: {id:1} });
            //alert('page changed.'); 
            return false;
        }

它改变了页面，但网址是basefile.html?id=1但它应该是basefile.html#profile?id=1

有人能帮忙吗？非常感谢。

Answer 1

我看到这个问题已经得到了回答，人们对答案发表了评论，我也面临着这个问题。按照预期使用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...
});

显然，代码必须根据您的编码约定进行修改，但概念是存在的：

• 存储数据或通过其他方式访问数据

如前所述，还有其他途径（本地存储，ect），因此我将不谈这个问题，因为信息已经存在。

如上所述，我遇到了这个问题，我的建议是按照预期使用jQuery Mobile，并使用您自己的代码库使用有组织的对象层次结构创建和存储变量。如何组织它是您的选择，这正是javascript成为如此神奇语言的原因。

我们已经变得过于依赖图书馆，无法解决作者留给我们的简单问题，而这些问题需要我们使用创造性的、个人标准驱动的方法来解决。祝大家编码愉快，鼓励大家进行构建，而不仅仅是设计！

Answer 2

正如jQuery Mobile文档中提到的，jQuery Mobile不支持将查询参数传递到内部/嵌入页面，但有两个插件可以添加到项目中以支持此功能。有一个轻量级的page params插件和一个功能更全面的jQuery Mobile router插件可用于主干网。js或spine。js。

有其他方法可以实现不同页面之间的数据传递，但其中一些可能不受旧web浏览器的支持。您必须仔细选择实现方式，以免影响应用程序在多个浏览器上的互操作性。

您可以使用Web存储在不同页面之间传递数据。

如W3schools网站所述，使用HTML5，网页可以在用户浏览器中本地存储数据。早些时候，这是用饼干做的。但是，Web存储更安全、更快。数据不包含在每个服务器请求中，但仅在请求时使用。也可以在不影响网站性能的情况下存储大量数据。数据存储在键/值对中，网页只能访问自己存储的数据。Internet Explorer 8、Firefox、Opera、Chrome和Safari支持Web存储。Internet Explorer 7和早期版本不支持web存储。

有两个对象用于在客户端上存储数据：

• 本地存储，存储无过期日期的数据
• 会话存储，用于存储一个会话的数据

例子：

本地存储示例：

在第1页：本地存储。carType=“测试”
在第2页中，您可以使用：localStorage检索carType。车辆类型

会话存储示例：

在第1页：会话存储。卡号=10
在第2页中，可以使用：sessionStorage检索carType。卡号

关于您的案例，一种可能的解决方案是在每个锚点中添加id。然后捕获单击事件，检索id，将id保存在Web存储中并执行页面转换。在下一页中从Web存储中检索id。下面您可以找到实现：

<ul id="menu_list" data-role="listview" data-theme="a">
   <li><a id="1" href="#">Martin</a></li>
   <li><a id="2" href="#">Johnny</a></li>   
   <li><a id="3" href="#">Luke</a></li>
</ul>


$('#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为/车辆详细信息。html？id=我的id

有关完整示例，请检查此StackOverflow答案

我希望这对你有帮助。