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

Question

我已经搜索了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

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

Answer 1

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

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

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

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

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

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

例子:

本地存储示例:

在Page1:localStorage.carType ="test";
在Page2中,您可以使用:localStorage.carType检索carType

会话存储示例:

在Page1:sessionStorage.carNumber = 10;
在Page2中,您可以使用:sessionStorage.carNumber检索carType

关于您的情况,可能的解决方案是在每个锚中添加ID.然后捕获click事件,检索id,将id保存在Web存储中并执行页面转换.在下一页中,从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答案

我希望这可以帮助你.