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

Question

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

8

我在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中）：Uncaught Error: Syntax error, unrecognized expression: #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

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

- LukeSolar

我为jQuery Mobile制作了一个小插件，以便页面可以处理URL参数，如果您仍然感兴趣的话。适用于jQM 1.3，即将升级插件以适应jQM 1.4。 - Cameron Askew

@CameronAskew 我非常有兴趣看一下那个......谢谢。 - Phill Healey

1

@PhillHealey 好的，我会在今天结束前将它上传到 GitHub 并给你一个链接。你正在使用 jQM 1.4 吗？ - Cameron Askew

@CameronAskew 是的！非常感谢。谢谢。 - Phill Healey

2

@PhillHealey 这是链接 - Cameron Askew

显示剩余3条评论

2个回答

3

我看到这个问题已经得到回答，并且在回答中有评论交流，我也遇到了这个问题。使用 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成为如此出色的语言的原因。

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

- Brett Weber

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Apostolos Emmanouilidis · Accepted Answer

如jQuery Mobile文档所述，jQuery Mobile不支持向内部/嵌入式页面传递查询参数，但是您可以添加两个插件到项目中来支持此功能。一个是轻量级的page params插件，另一个是更全面的jQuery Mobile路由插件，用于与backbone.js或spine.js一起使用。

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

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

如W3schools网站所述，使用HTML5，网页可以在用户的浏览器中本地存储数据。以前，这是使用cookie完成的。但是，Web Storage更安全、更快速。数据不随每个服务器请求一起发送，而是仅在需要时使用。还可以存储大量数据，而不会影响网站的性能。数据以键/值对方式存储，网页只能访问自己存储的数据。Web存储在Internet Explorer 8+、Firefox、Opera、Chrome和Safari中受支持。Internet Explorer 7及更早版本不支持Web Storage。

客户端存储数据的两个对象如下：

localStorage：不带到期日期的存储数据
sessionStorage：为一次会话存储数据

例如：

Local Storage 示例：

在Page1中：localStorage.carType="test";
在Page2中，您可以使用localStorage.carType检索carType。

Session Storage 示例：

在Page1中：sessionStorage.carNumber=10;
在Page2中，您可以使用sessionStorage.carNumber检索carNumber。

关于您的情况，一个可能的解决方案是在每个锚点中添加ID。然后捕捉点击事件，检索ID，在Web Storage中保存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答案

希望这能帮到您。