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

Question

我在 stackoverflow 上进行了搜索，但没有找到正确的解决方案来以编程方式更改 jqm 页面并传递(获取)参数。我是 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;
        }

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

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

Answer 1

As mentioned in the jQuery Mobile Docs, jQuery Mobile does not support query parameter passing to internal/embedded pages but there are two plugins that you can add to your project to support this feature. There is a lightweight page params plugin and a more fully featured jQuery Mobile router plugin for use with backbone.js or spine.js.

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

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

As mentioned in the W3schools site, with HTML5 web pages can store data locally within the user's browser. Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website's performance. The data is stored in key/value pairs, and a web page can only access data stored by itself. Web storage is supported in Internet Explorer 8+, Firefox, Opera, Chrome, and Safari. Internet Explorer 7 and earlier versions, do not support web storage.

There are two objects for storing data on the client:

• localStorage which stores data with no expiration date
• sessionStorage which stores data for one session

示例:

本地存储示例:

在第1页中:localStorage.carType="test";
在第 2 页中，您可以使用以下方式检索 carType:localStorage.carType

session 存储示例:

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

根据您的情况，一个可能的解决方案是在每个 anchor 中添加 id。然后捕获点击事件，检索id，将id保存在网络存储中并执行页面转换。在下一页中，从网络存储中检索 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

希望这对您有帮助。