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 中）：未捕获错误：语法错误，无法识别的表达式：#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

任何人都可以帮忙吗？非常感谢。

4

2 回答 2

16

正如jQuery Mobile Docs中提到的，jQuery Mobile 不支持将查询参数传递给内部/嵌入式页面，但是您可以将两个插件添加到您的项目中以支持此功能。有一个轻量级页面参数插件和一个功能更全面的jQuery Mobile 路由器插件，可与主干.js 或脊柱.js 一起使用。

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

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

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

我希望这可以帮助你。

于 2012-08-21T17:10:01.687 回答
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 如此出色的语言的原因。

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

于 2013-02-04T23:34:20.420 回答