将参数传递给 jQuery Mobile 中的页面答案

【问题标题】：Pass parameter to the page in jQuery Mobile将参数传递给 jQuery Mobile 中的页面
【发布时间】：2012-09-05 21:26:21
【问题描述】：

我有两个页面，p1.html 和 p2.html 使用 jQuery Mobile。

p1.html 中有一些链接，所有链接都导航到p2.html，但略有不同。

我想将一个int 参数传递给p2.html javascript（例如，链接号），所以p2.html 中的一个javascript 代码，基于int 参数对其自身进行少许更改（在转换开始之前)。

我想使用 jQuery Mobile 的 Ajax 导航功能和转换，我不想使用页面锚点 (p2.html#6)。

如何将该参数发送到p2.html？

【问题讨论】：

看看这个帖子，如果你正在考虑获取参数，它可能会对你有所帮助：stackoverflow.com/q/5448545/467164
@ZathrusWriter 如果我使用该方法，JQM 将多次下载该页面（每个链接一次），因为 URL 不同，但所有链接的 html 内容相同。所以应该下载一次...（p2.html是一个大页面，应该不多次下载...）
@ZathrusWriter p2.html 的细微差别应该由客户端 javascript 代码实现。
以及如何在pagebeforechange事件中检测JQM是否会去p2.html（而不是其他页面）？
好的，让我试试。您可以发布您的 cmets 作为答案吗？

标签： javascript jquery jquery-mobile

【解决方案1】：

可以使用cookies来保存相关信息吗？

获取cookie jquery plugin。

p1.html

<a href="p2.html" data-p2data="1">Link 1</a>
<a href="p2.html" data-p2data="2">Link 2</a>
<script type="text/javascript">
$(document).ready(function(){
    $('a[data-p2data]').click(function(){
        $.cookie('p2data', $(this).data('p2data'));
    }
}
</script>

p2.html

<script type="text/javascript">
    var p2data = $.cookie('p2data');
    // .. process the page based on the value in p2data.
</script>

【讨论】：

我会说使用 cookie 在页面之间发送参数有点矫枉过正，考虑到它们被用作持久存储
@ZathrusWriter 但是这种方法也适用于不支持 Ajax 导航的 B 级浏览器...
@AndrewR 你能提供cookie jquery插件的链接吗？（找了几个插件，不知道你指的是哪一个）
@MahdiGhiasi 是的，我没想到 :)
@ZathrusWriter 我同意，通常我不会建议这样做。但考虑到问题中的参数，它似乎是最好的解决方案。

【解决方案2】：

从docs 开始，没有内置方法可以在页面之间传递参数。

但是，您可以使用其中提到的插件之一（page-params 或 jquery-mobile-router），也可以使用 localStorage 或 cookie。

看看其中一些 SO 问题

Passing data between pages with jQuery Mobile?

Passing parameters to a page-id in jQuery Mobile

How-to store variable beetween jQM pages?

【讨论】：

【解决方案3】：

当点击 page1.html 上的链接时，您可以使用全局变量来存储该数值：

$('a.special_link').click(function() {window.my_id = this.id});

...您将能够在 page2.html 中检索它，因为 JQM 默认使用 AJAXed 导航，因此仍然可以访问该变量的单个页面：

$('document').on('pagebeforechange', function(toPage, data) {
    if (toPage == 'page2.html') {
        alert('you have clicked on link number: ' + window.my_id);
    }
});

【讨论】：