如何在 Jquery Mobile 中的两个页面之间传递和获取参数？答案

【问题标题】：How to pass and get Parameters between two Pages in Jquery Mobile?如何在 Jquery Mobile 中的两个页面之间传递和获取参数？
【发布时间】：2011-09-28 11:48:57
【问题描述】：

我正在开发一些演示应用程序来学习 Jquery Mobile 中的内容。我尝试了很多选择，但无法解决一些问题：-

http://jsfiddle.net/sahil20grover1988/zZMXQ/48/ 在这种情况下，当我在 Index page 中添加 param 和 Url 时，它不会指向 Search Page
如果我不将参数添加到 索引页面，那么我如何将参数从 索引页面 传递到 搜索页面。
我还需要帮助我如何在搜索页面中检索参数 ??

【问题讨论】：

标签： javascript jquery parameters jquery-mobile

【解决方案1】：

这有帮助吗？

http://jsfiddle.net/phillpafford/VXV3R/

JS

$('#page2').live('pageshow', function(event, ui) {
    alert('Page 2 - CID: ' + getParameterByName('cid'));
});

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

HTML

<div data-role="page" id="home">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">
                Home Page
            </li>
            <li>
                <a href="?cid=1234#page2" rel="external">Page 2</a>
            </li>
        </ul>                
    </div>
</div>
<!-- page 2 -->
<div data-role="page" id="page2">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">
                Page 2
            </li>
            <li>
                <a href="?cid=4321#home">Home Page</a>
            </li>
        </ul>
    </div>
</div>

【讨论】：

很好地解释了谢谢，但为什么这不起作用？ jsfiddle.net/sahil20grover1988/VXV3R/9

【解决方案2】：

我想出了这个简单的方法......

首先在第 1 页的元素中添加自定义 HTML5 属性，以保存要传递的数据。我的属性名为data-parm

<div data-role="page" id="one">
    <div data-role="content">
        <ul data-role="listview" data-theme="c">
        <li><a data-parm="john" href="#two">one</a></li>
        <li><a data-parm="mary" href="#two">two</a></li>
        <li><a data-parm="sue" href="#two">three</a></li>
        </ul>
    </div>
</div>   

<div data-role="page" id="two">
    <div data-role="content">
        <div id="showParmHere"></div>
    </div>
</div>

在您的 javascript 中，创建一个单击处理程序（或其他类型的处理程序），该处理程序选择属性并将值分配给将在第 2 页上为您提供的变量。

对于这个例子，我已将它添加到第 2 页上的 div 的 html 中。

$("a").on("click", function (event) {

   var parm = $(this).attr("data-parm");
   //do something here with parameter on page 2 (or any page in the dom)
   $("#showParmHere").html(parm);

});

【讨论】：

JQUERY 的简单和基本使用。不错！！
@Joel：使用var parm = $('this').data('parm'); 而不是.attr。这种方式对循环引用是安全的，因此不会导致内存泄漏
@Tom：非常感谢您的提示。令人困惑的是，对此似乎存在分歧。例如这篇文章说的完全相反。 lookfirst.com/2011/12/dont-use-jquery-data-method-use-attr.html。哪个是正确的？
@JoelErenberg：当属性直接从 DOM (see example) 读取时，他们谈论的情况是一个问题。对于这种罕见的情况，您必须使用.attr()，但绝对不要在一般情况下使用它来代替.data()，因为.data() 不会写入DOM，它的速度要快得多。 Using jQuery’s Data APIs 和安全
@JoelErenberg：这是 Stack Overflow 上一个问题的主题：stackoverflow.com/q/7261619/670377

【解决方案3】：

要在 jQuery mobile 中通过 url 传递 valor，您可以使用 rel="external"...

例子：

<a id="l" href="index.html?id='1234'#dateA" rel="external">

你可以看到： http://demos.jquerymobile.com/1.2.0/docs/pages/page-links.html

【讨论】：

【解决方案4】：

我偶然发现了这个问题，因为同样的问题，但我认为我找到了一种更简单的方法。至少如果您使用“pagebeforechange”事件。到目前为止，这就是我尝试解决方案的地方。

可以通过这个对象路径从pageonchange事件函数的第二个参数中获取搜索字符串：“.options.link.context.search”。我希望示例代码足以解释它。

$(document).live("pagebeforechange", function(e, secondparameter) {
  alert(secondparameter.options.link.context.search);
});

【讨论】：

【解决方案5】：

我为 jQM 1.4+ 创建了一个解决方案，它允许通过 URL 传递参数。如果您希望用户能够直接进入带有参数的页面（例如来自电子邮件），或者如果用户刷新页面，这将非常有效。

它在 MIT 许可下，你可以找到它here on GitHub。

【讨论】：