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

Question

我正在开发一些演示App来学习Jquery Mobile中的东西.我已经尝试了很多选项,但无法在以下几个方面获​​得解决方案: -

1. http://jsfiddle.net/sahil20grover1988/zZMXQ/48/在这种情况下,当我在索引页面中添加带有Url的param时,它不会指向搜索页面
2. 如果我没有将Params添加到Index页面,那么如何将params从Index页面传递到Search页面.
3. 此外,我需要帮助如何检索PARAMS在搜索页面？

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);

});