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

Question

我正在开发一些演示应用程序来学习 Jquery Mobile 中的知识。我尝试了很多选项，但无法在一些问题上找到解决方案：-

1. http://jsfiddle .net/sahil20grover1988/zZMXQ/48/ 在这种情况下，当我添加 param 和 Url 时索引页它不定向到搜索页
2. 如果我不将参数添加到索引页，那么我如何传递参数< /strong> 从索引页到搜索页。
3. 我还需要帮助如何在搜索页面中检索参数？

Answer 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>

Answer 2

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

首先将自定义 HTML5 属性添加到第 1 页上的元素以保存要传递的数据。我的属性名为 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);

});

Answer 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

Answer 4

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

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

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

Answer 5

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

它受 MIT 许可，您可以在 GitHub 上找到它。