Javascript 如何在 Jquery Mobile 中的两个页面之间传递和获取参数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7582781/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to pass and get Parameters between two Pages in Jquery Mobile?
提问by Sahil Grover
I am working on a some demo App to learn things in Jquery Mobile. I have tried a lot of options but not able to get solution on a few things :-
我正在开发一些演示应用程序来学习 Jquery Mobile 中的内容。我尝试了很多选择，但无法解决一些问题：-
- http://jsfiddle.net/sahil20grover1988/zZMXQ/48/In this case when i add paramwith Urlin Index pageit is not directing to Search Page
- In case if I dont add Params to Index pagethen how do I pass paramsfrom Index pageto Search page.
- Also I need help how to retrieve the Paramsin search page??
- http://jsfiddle.net/sahil20grover1988/zZMXQ/48/在这种情况下，当我在索引页面中添加带有Url 的参数时，它不是指向搜索页面
- 如果我不将参数添加到索引页面，那么我如何将参数从索引页面传递到搜索页面。
- 另外我需要帮助如何在搜索页面中检索参数？
回答by Phill Pafford
Does this help?
这有帮助吗？
JS
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
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>
回答by Joel Erenberg
I came up with this simple approach...
我想出了这个简单的方法......
First add custom HTML5 attributes to the elements on page 1 to hold the data to be passed. My attribute is named data-parm
首先向第 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>
In your javascript, create a click handler (or other type of handler) that selects the attribute and assigns the value to a variable which will be available for you on page 2.
在您的 javascript 中，创建一个点击处理程序（或其他类型的处理程序）来选择属性并将值分配给一个变量，该变量将在第 2 页上为您提供。
For this example, I have added it to the html of a div that is on page 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);
});
回答by daniel_mutu
To pass valor with url in jQuery mobile you can use rel="external"...
要在 jQuery mobile 中使用 url 传递 valor，您可以使用 rel="external"...
Example:
例子：
<a id="l" href="index.html?id='1234'#dateA" rel="external">
You can see: http://demos.jquerymobile.com/1.2.0/docs/pages/page-links.html
你可以看到：http: //demos.jquerymobile.com/1.2.0/docs/pages/page-links.html
回答by Crazy Doc
I stumbled on this question because the same issue, but think I found an easier way. At least if you use the "pagebeforechange" event. That's where I tried the solution so far.
我偶然发现了这个问题，因为同样的问题，但我想我找到了一个更简单的方法。至少如果您使用“pagebeforechange”事件。到目前为止，这就是我尝试解决方案的地方。
You can get the search string from the second parameter of the pageonchange event function by this object path: ".options.link.context.search". I hope the example code is enough to explain it.
您可以通过此对象路径从 pageonchange 事件函数的第二个参数中获取搜索字符串：“.options.link.context.search”。我希望示例代码足以解释它。
$(document).live("pagebeforechange", function(e, secondparameter) {
alert(secondparameter.options.link.context.search);
});
回答by Cameron Askew
I created a solution for jQM 1.4+ which allows parameters to be passed through the URL. This works quite nicely if you want the user to be able to go directly to a page with parameters (say from an e-mail), or if the user refreshes the page.
我为 jQM 1.4+ 创建了一个解决方案，它允许通过 URL 传递参数。如果您希望用户能够直接转到带有参数的页面（例如从电子邮件中），或者如果用户刷新页面，这将非常有效。
It's under the MIT license and you can find it here on GitHub.
它在 MIT 许可下，您可以在 GitHub 上找到它。
