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浏览器可能不支持其中一些。您必须仔细选择实施方式，以免影响应用程序在多个浏览器上的互操作性。

您可以使用网络存储空间在不同网页之间传递数据。

正如W3schools网站所述，HTML5网页可以在用户的浏览器中本地存储数据。早些时候，这是用cookies完成的。但是， Web存储更安全，更快捷。每个服务器请求都不包含这些数据，但仅在被要求时使用。还可以存储大量数据，而不会影响网站的性能。数据存储在键/值对中，并且网页只能访问自己存储的数据。 Internet Explorer 8 +，Firefox，Opera，Chrome和Safari 支持网络存储。 Internet Explorer 7 及早期版本不支持网络存储。

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


localStorage，用于存储没有过期日期的数据

sessionStorage，用于存储一个会话的数据

示例：

本地存储示例：

在Page1：localStorage.carType =“test”;
在Page2中，您可以使用：localStorage.carType

检索carType

会话存储示例：

在第1页：sessionStorage.carNumber = 10;
在Page2中，您可以使用：sessionStorage.carNumber

检索carType

关于您的情况，可能的解决方案是在每个锚中添加ID。然后捕获click事件，检索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
        }
    });
});

构建的网址是... / car-details.html？id = my-id

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

我希望这会对你有所帮助。

Answer 2

我看到这个问题已经得到解答，评论在答案上进行了交易，我也遇到了这个问题。使用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成为一种奇妙语言的原因。

我们过于依赖图书馆来解决作者留给我们使用我们的创造性和个人标准驱动方法解决的简单问题。祝所有人感到愉快，鼓励建立，而不仅仅是设计！

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

2 个答案: