如何在 JQuery Mobile 中更改页面时传递参数? [英] How to pass parameters while changing the page in JQuery Mobile?

问题描述

我搜索过stackoverflow，但没有找到合适的解决方案来以编程方式更改jqm 页面并传递一个(get)参数.我是 jqm 的新手，所以我在使用 changePage() 函数传递数据时可能会出错.

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.

使用 jquery mobile 1.1.1 和 jquery 1.8.0

using jquery mobile 1.1.1 and jquery 1.8.0

我有一个列表并希望所有项目都指向同一个#profile 页面.在那个页面上，我想用 ajax/json 加载适当的数据.

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.

<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(显然)

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

第二个链接不工作引发异常(在 chrome 中):未捕获的错误:语法错误，无法识别的表达式:#profile?id=3

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

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

The third link uses this function:

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

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

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

有人可以帮忙吗?非常感谢.

Can anyone help with that? Thanks a lot.

推荐答案

如 jQuery Mobile 文档中所述，jQuery Mobile 不支持将查询参数传递到内部/嵌入式页面，但您可以将两个插件添加到您的项目中以支持此功能.有一个轻量级的 page params plugin 和一个更完整的精选 jQuery Mobile 路由器插件，用于backbone.js 或spine.js.

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.

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

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.

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

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

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

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 存储没有到期日期的数据
• sessionStorage 存储一个会话的数据

示例:

本地存储示例:

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

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

会话存储示例:

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

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

关于您的情况，可能的解决方案是在每个锚点中添加 id.然后捕捉点击事件，检索id，将id保存在web存储中并执行页面转换.在下一页中，从网络存储中检索 id.您可以在下面找到实现:

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:

<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 页面请求的数据.

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

$('#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

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

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

For a complete example check this StackOverflow answer

希望对你有帮助.

这篇关于如何在 JQuery Mobile 中更改页面时传递参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！