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

Question

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

1. http://jsfiddle.net/sahil20grover1988/zZMXQ/48/在这种情况下，当我在索引页面中添加带有网址的 参数时 ，它不会定向到搜索页面
2. 如果我不将参数添加到索引页面，那么如何将参数从索引页面传递到搜索页面 。
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中使用网址传递勇气，您可以使用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上找到它。