在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)

第二个链接ist不起作用会引发异常(在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 Docs中所述，jQuery Mobile不支持将查询参数传递到内部/嵌入式页面，但是您可以将两个插件添加到项目中以支持此功能.有一个轻量级的页面参数插件等等功能齐全的 jQuery Mobile路由器插件，可与骨干.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.

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

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.然后捕获click事件，获取ID，将ID保存在网络存储中并执行页面转换.在下一页中，从网络存储中检索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屋！