我有一个两页的应用程序，我需要显示一些结果。
第一页
<div data-role="content">
<!-- content -->
<form>
<label for="search-1">Search:</label>
<input name="search-1" id="search-1" value="" type="search">
</form>
有一个带有输入类型搜索的表单。如何获取此搜索输入的值，并将其传递到单独 html 文件中的第二个 jQuery Mobile 页面，以便我可以使用 Web 服务使用该值获取数据并使用列表来表示数据。
第二页
<div data-role="content" id="content">
<ul data-role="listview" data-inset="true" id="bookListThumbs">
//data to be added here....
</ul>
</div><!-- /content -->
最佳答案
解决方案
在页面转换期间可以将参数从一个页面发送到另一页面。可以这样完成:
您可以使用changePage传递值:
$.mobile.changePage('page2.html', { dataUrl : "page2.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true });
并像这样阅读它们:
$(document).on('pagebeforeshow', "#index", function (event, data) {
var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("parameter=","");
alert(parameter);
});
示例:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pagebeforeshow', "#index",function () {
$(document).on('click', "#changePage",function () {
if($('#search-1').val().length > 0){
$.mobile.changePage('second.html', { dataUrl : "second.html", data : { 'input' : $('#search-1').val()}, reloadPage : false, changeHash : true });
} else {
alert('Search input is empty!');
}
});
});
$(document).on('pageshow', "#second",function () {
var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("input=","");
alert(parameter);
});
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="index">
<div data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<form>
<label for="search-1">Search:</label>
<input name="search-1" id="search-1" value="" type="search">
<a data-role="button" id="changePage">Send data to other page</a>
</form>
</div> <!--content-->
</div><!--page-->
</body>
</html>
第二个.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="second">
<div data-role="header">
<h3>
Second Page
</h3>
</div>
<div data-role="content">
</div> <!--content-->
</div><!--page-->
</body>
</html>
关于javascript - (Phonegap应用程序)如何在jQuery Mobile中的两个页面中传递输入搜索的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16738210/