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

Question

我搜索了 stackoverflow，但没有找到合适的解决方案来以编程方式更改 jqm 页面并传递 (get) 参数。我是 jqm 的新手，所以在使用 changePage() 函数传递数据时可能会出错。

使用 jquery mobile 1.1.1 和 jquery 1.8.0

我有一个列表，希望所有项目都指向同一个#profile 页面。在该页面上，我想使用 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 中）：未捕获的错误：语法错误，无法识别的表达式：#profile?id=3

第三个链接使用这个函数：

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

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

有人可以帮忙吗？非常感谢。

Answer 1

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

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

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

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

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

• localStorage 存储没有过期日期的数据
• sessionStorage 存储一个会话的数据

例子：

本地存储示例：

在第 1 页中：localStorage.carType="test";
在 Page2 中，您可以使用以下命令检索汽车类型：localStorage.carType

会话存储示例：

在第 1 页：sessionStorage.carNumber=10;
在 Page2 中，您可以使用以下方法检索 carType：sessionStorage.carNumber

关于您的情况，一种可能的解决方案是在每个锚点中添加 id。然后捕捉点击事件，获取id，将id保存在网络存储中，进行页面转换。在下一页中，从 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 是 .../car-details.html?id=my-id

有关完整示例，请查看StackOverflow answer

希望对你有帮助。

Answer 2

我看到这个问题已经被回答了，并且 cmets 在这个答案上进行了交易，我也遇到了这个问题。按预期使用 jQuery Mobile 允许加载 ajax，因此除非用户发起，否则不需要刷新浏览器，对吗？如果用户出于某种原因正在刷新，这意味着该站点或应用程序没有按照预期的方式运行，因为大多数用户不会在没有令人沮丧的原因的情况下刷新。

这么说，正如 cmets 所建议的那样，创建变量是一种将数据从“页面”传递到“页面”的有效方式。但是，我的建议是创建一个全局变量来包含站点信息。

$('#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 如此出色的语言的原因。

我们已经变得过于依赖库来解决作者留给我们使用我们创造性和个人标准驱动的方法来解决的简单问题。祝所有人编码愉快，鼓励构建，而不仅仅是设计！