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

How to pass parameters while changing the page in JQuery Mobile?

提问by LukeSolar

I've searched around stackoverflow but didnt find a proper solution to programmatically change the jqm page and pass a (get) parameter with it. I'm new to jqm so maybe I get something wrong on passing data with the changePage() function.

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

using jquery mobile 1.1.1 and jquery 1.8.0

使用 jquery mobile 1.1.1 和 jquery 1.8.0

I have a list and want all items to point to the same #profile page. on that page I want to load the appropriate data with ajax/json.

我有一个列表，并希望所有项目都指向同一个 #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>

The first link working, but no id is passed (obviously)

第一个链接有效，但没有传递 id（显然）

The second link ist not working throws exception (in chrome): Uncaught Error: Syntax error, unrecognized expression: #profile?id=3

第二个链接不起作用引发异常（在 chrome 中）：未捕获的错误：语法错误，无法识别的表达式：#profile?id=3

The third link uses this function:

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

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

It changes the page but the url is basefile.html?id=1 but it should be basefile.html#profile?id=1

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

Can anyone help with that? Thanks a lot.

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

回答by Apostolos Emmanouilidis

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 pluginand a more fully featured jQuery Mobile router pluginfor use with backbone.js or spine.js.

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

There are other ways to implement the data passing during different pages but some of them may are not supported from old web browsers. You will have to select your implementation way carefully so that it does not induce consequences to the application's interoperability over multiple browsers.

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

You can pass data between different pages by using the Web Storage.

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

As mentioned in the W3schoolssite, with HTML5 web pages can store data locally within the user's browser. Earlier, this was done with cookies. However, Web Storageis 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 7and 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

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

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

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

Examples:

例子：

Local Storage Example:

本地存储示例：

In Page1: localStorage.carType="test";
In Page2 you can retrieve the carType using: localStorage.carType

在第 1 页：localStorage.carType="test";
在 Page2 中，您可以使用以下方法检索 carType：localStorage.carType

Session Storage Example:

会话存储示例：

In Page1: sessionStorage.carNumber=10;
In Page2 you can retrieve the carType using: sessionStorage.carNumber

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

Regarding your case, a possible solution is to add ids in each anchor. Then catch the click event, retrieve the id, save the id in the web storage and perform the page transition. In the next page retrieve the id from the web storage. Below you can find the implementation:

关于您的情况，可能的解决方案是在每个锚点中添加 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();
        });
    }
});

EDITED:

编辑：

Alternative way to pass parameters when following a multiple pages approach

遵循多页方法时传递参数的替代方法

This example uses jQM changePage()to send data with an Ajax page request.

此示例使用jQM changePage()Ajax 页面请求发送数据。

$('#list-d a').on('click', function(e) {
    e.preventDefault();
    $.mobile.changePage('car-details.html', {
        data: {
            id: this.id
        }
    });
});

The constructed URL is .../car-details.html?id=my-id

构造的 URL 是 .../car-details.html?id=my-id

For a complete example check this StackOverflow answer

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

I hope this helps you.

我希望这可以帮助你。

回答by Brett Weber

I see that this question was already answered and comments were traded on the answer, and I have also faced this issue. Using jQuery Mobile as it is intended allows for ajax loading, and therefore no need for a browser refresh unless instigated by a user, correct? And if a user is refreshing for some reason, that means that the site or app isn't functioning the way it is exptected to since most users wouldn't refresh without a frustrating cause.

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

In saying so, as suggested by the comments creating a variable is an efficient way of passing data from "page" to "page". However, my suggestion in doing so is to instead create a global variable to contain site information.

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

$('#elemControlToChangeBy').on("tap", function(oEvent)
{
   oMyNameSpace.PageDataObj = oDataObj;

   $.mobile.changePage("#elemPage", {transition : "type"})
});

$("elemPage").on("pageshow", function()
{
   var oDataObj = oMyNamespance.PageDataObj;

   //Use the data...
});

Obviously the code will have to modified to your coding conventions, but the concepts are there:

显然，代码必须根据您的编码约定进行修改，但概念就在那里：

• Store your data or access it by some other means
• Place the data in a contained variable to prevent any overwrites by external code
• Access the data object variable when you arrive at the next page

• 存储您的数据或通过其他方式访问它
• 将数据放在包含的变量中以防止任何外部代码覆盖
• 到达下一页时访问数据对象变量

There are other routes, as already stated(local storage, ect) so I won't go touching on that since the information is there already.

如前所述，还有其他路线（本地存储等），因此我不会继续讨论，因为信息已经存在。

As stated above, I've run into this issue, and my suggestion is to use jQuery Mobile as it was intended and use your own code base to create and store variables using an organized object hierarchy. How you organize it is of your choice, which is precisely what makes javascript such a fantastic language.

如上所述，我遇到了这个问题，我的建议是按预期使用 jQuery Mobile，并使用您自己的代码库使用有组织的对象层次结构创建和存储变量。你如何组织它是你的选择，这正是使 javascript 成为如此出色的语言的原因。

We've become too dependent on libraries to solve simple issues that the authors leave to us to solve using our inventive and personal standard driven methods. Happy Coding to all, with an encouragement to build, not just design!

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