我构建了一个列出一些项目的应用程序,通过在 #site1 上启动时使用AJAX * once *从我的服务器请求JSONP 。如果您点击项目(DIV),它会将您定向到#sitedetails。在“sitedetails”上,点击项目的基本细节和描述将使用 AJAX jsonp 加载(它只是文本)。
如果我在带有 WIFI 的测试设备上尝试我的 jQuery-Mobile PhoneGap 应用程序,它可以正常工作,一旦我使用3G,它就会终止连接。有时“sitedetails”需要很长时间才能发出请求(2-5 秒)。通常需要不到 1 秒,因为它只有几 kb。因为我在 JSONP 请求上设置了超时。5sec 它经常显示我的函数的错误消息。
当这些类型的错误发生时,我导航回 site1 并再次点击一个项目,它就会工作。
在 XCode 中,它会在遇到该问题时显示此消息:
purgeIdleCellConnections: found one to purge conn = 0x1f078460
purgeIdleCellConnections: found one to purge conn = 0x1e591fd0
purgeIdleCellConnections: found one to purge conn = 0x1e591fd0
虽然我的3G连接又快又稳定。它也不能是服务器,在WIFI上它会立即响应并在“sitedetails”上显示描述。
现在奇怪的是:我发现只有在我点击一个项目后等待太久才会发生这种情况。我需要导航回“site1”并尽可能快地点击另一个项目,一次又一次,一次又一次......并且不会出现连接问题。但是由于这对用户来说是不现实的,所以它对我没有帮助。
现在源代码:
var itemid;
$(document).on('pageinit', '#site1', function(){
var output = $('#items');
$.ajax({
url: 'http://************.com/api/files/json/mydata.php',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
$.each(data, function(i,item){
var allitems =
"<div id='con' data-id="+item.id+">"+
"<div id='name'><b>"+item.name+"</b></div>"+
"<div id='date'><b>"+item.date+"</b></div>"+
"</div>";
output.append(allitems);
});
},
error: function(){
output.text('ERROR - Could not load data.')
}
});
});
点击事件:
$(document).on('tap', '#con', function(event) {
itemid = $(this).attr('data-id');
$.mobile.changePage('#sitedetails');
});
问题区:
$(document).on('pagebeforeshow', '#sitedetails', function(){
var output = $('#itemdetails');
$.ajax({
url: 'http://************.com/api/files/json/mydatadetails.php?itemid='+itemid,
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 4000,
success: function(data, status){
$.each(data, function(i,item){
var itemdetails =
"<div id='name'><b>"+item.name+"</b></div>"+
"<div id='date'><b>"+item.date+"</b></div>"+
"<div id='date'><b>"+item.details1+"</b></div>"+
"<div id='date'><b>"+item.details2+"</b></div>";
output.empty().append(itemdetails);
});
},
error: function(){
output.text('ERROR - Could not load data.')
}
});
});
基本上就是这样,除了只有一个 DIV 的 2 个页面(site1:#items,sitedetails:#itemdetails)。
我在 iOS 6.1 上使用 XCode 4.6、PhoneGap 2.9、JQuery 1.9、JQM 1.3.1
编辑:我忘记了服务器上的 mydatadetails.php:
<?php
header('Content-type: application/json');
$server = "*******.com";
$user = "***********";
$pw = "***********";
$db = "***********";
$itemid = $_GET["itemid"];
$connection = mysql_connect($server, $user, $pw) or die ("Could not connect: " . mysql_error());
mysql_select_db($db, $connection);
$sql = "SELECT id, name, date, details1, details2 WHERE id='".$itemid."'";
$result = mysql_query($sql) or die ("Query error: " . mysql_error());
$records = array();
while($row = mysql_fetch_assoc($result)) {
$records[] = $row;
}
mysql_close($connection);
echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';
?>
我感谢每一个答案。