首先，我要感谢Gajotres，从他的回复中，我学会了如何发送数据/参数（但请原谅我破碎的英语）。
参考：jQuery Mobile: document ready vs page events
我使用的是我在这个例子中学到的方法，但有两个问题是我无法解决的，请帮我一个忙。
第一次单击第二页上的列表项时，它可以将值传递给第三页，下一页也可以获取初始化所有组件的值，但是如果返回上一页并且单击另一个列表项，问题发生了，它不能再次初始化下一页（我也可以从另一个列表项中获取参数，但不能在第三页中将值设置为组件）。
如果我从第三页返回第二页，每次刷新第二页，第一个问题就可以解决;但我认为这不是一个好方法。
当我在第三页上刷新时，它不会刷新当前页面但返回第二页。
这是我的代码：
First.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>
<div data-role="page" id="home" data-dom-cache="true">
<div data-role="content" >
<div data-role="listview" data-theme="c" data-inset="true" id="ermlist">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider" data-divider-theme="a" ><h1>Options</h1></li>
<li><a href="Second.html" id="itemNewProduct">Products</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Second.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>
<div data-role="page" id="second">
<div data-role="content">
<ul id="newProductList" data-role="listview" data-theme="c" data-inset="true">
</ul>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url:"/gzdaxun/promotion/intf3_001action.action?newProductForJson=null",
dataType:"json",
beforeSend: function() {
$.mobile.showPageLoadingMsg(true); // This will show ajax spinner
},
complete: function() {
$.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
},
success:function(result){
var newProduct = result.newProduct;
$.each(newProduct, function(index, item){
var itemId = item.id;
$("#newProductList").append('<li><a href="#" onclick="OKAdd('+itemId+')"><img src="/gzdaxun'+item.smallPicUrl+ '" ><h1>'+item.name+'</h1></a></li>');
});
$("#newProductList").listview("refresh");
},
error:function(){
alert("please try again!");
}
});
});
function OKAdd(itemId) {
var params = itemId+'';
$.mobile.changePage('Third.html', { dataUrl : "Third.html?id='+itemId+'", data : { 'id' : params }, reloadPage : false, changeHash : true });
}
</script>
</body>
</html>
Third.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" />
<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>
<div data-role="page" id="third" data-dom-cache="true">
<div data-role="content" id = "bigImage">
<div class="center-image">
<img src="/gzdaxun'+details[0].bigPicUrl+ '" id="bigPicUrl" width="400" height="180" alt="background">
</div>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><a data-role="button" class="green" id="book">Book</a></div>
<div class="ui-block-b"><a data-role="button" class="blue" id="share">Share</a></div>
</fieldset>
<div data-role="collapsible" data-theme="b" data-content-theme="c" id="outer-collapsible" data-collapsed="false">
<h2>Know More...</h2>
<div data-role="collapsible" data-theme="c" data-content-theme="c" id="inner-collapsible" data-collapsed="false">
<h2>Details...</h2>
<ul data-role="listview">
<li>
<h3 class="color-blue">Introduction</h3>
<p id="message"></p>
<p class="ui-li-aside price" id="price"><strong></strong></p>
</li>
<li>
<h3 class="color-blue">Feature</h3>
<p id="feature">Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
</li>
</ul>
</div>
<div data-role="collapsible" data-theme="c" data-content-theme="c" id="inner-collapsible" data-collapsed="false">
<h2>customer reviews...</h2>
<ul data-role="listview" id="custom-listview">
<li>
<h2>David</h2>
<p><strong>experience/reviews</strong></p>
<p> the environment is very beautiful</p>
<p class="ui-li-aside"><strong>8:24</strong>AM</p>
</li>
<li>
<h3>John</h3>
<p ><strong>experience/reviews</strong></p>
<h4>Town in Europe is the theme of the hotel characteristics, sensory permeated every corner of Europe, the most important is the scenery is quite beautiful, insufficient place is too remote</h4>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$(document).on("pagebeforeshow", "#newProductDetails", function (event, data) {
var parameters = $(this).data("url").split("=")[1];;
$.ajax({
url:"/gzdaxun/product/intf1_004action.action?productIdForJson={'productId':'"+parameters+"'}",
dataType:"json",
beforeSend: function() {
$.mobile.showPageLoadingMsg(true); // This will show ajax spinner
},
complete: function() {
$.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
},
success:function(result){
var details = result.certainProduct[0];
var divId = details.id;
srcId = details.bigPicUrl;
var bigs = "/gzdaxun"+details.bigPicUrl+ "";
$("#bigPicUrl").attr("src",bigs);
$("#message").html(details.message+"");
$("#price").html(details.price+"/"+details.priceUnite+"");
$("#feature").html(details.feature+"");
},
error:function(){
alert("please try again!");
}
});
});
</body>
</html>