我面临的问题的代码片段是：
//select the shipping country to display its shipping rate
$('#country').change(function() {
if($(this).val() == ""){
$('#shippingRateDisplay').html('<br /><span style="margin-left:8px">No country selected.</span>');
return false;
}
alert("Before ajax start");
$.post('ajax_utility/getShippingCostProdDtls/', { country_id: $(this).val(),
product_id: <?php echo $this->uri->segment(3); ?>,
current_currency: '<?php echo $product->currency->cur_id; ?>'}, function(data){ alert("Successful ajax, but chrome is not reaching here");
if(data.status != 1){
$('#shippingRateDisplay').html("Shipping rate not set for the specified country");
}
else{
$("#shippingRateDisplay").html("");
var conShip = '<br /><table width="100%" cellpadding="0" cellspacing="1" bgcolor="#cdcdcd" class="darbluelink" id="shippingDetails">'+
'<tr>'+
' <td width="20%" bgcolor="#e9e8e8" class="darkblue text-center" style="padding:7px"><b>Country of delivery</b></td>'+
'<td colspan="2" align="center" bgcolor="#e9e8e8" class="darkblue text-center" style="padding:7px"><b>Shipping cost</b><b></b></td>'+
'<td width="24%" bgcolor="#e9e8e8" class="darkblue text-center" style="padding:7px"><b>Service used</b></td>'+
'<td width="16%" bgcolor="#e9e8e8" class="darkblue text-center" style="padding:7px"><b>Estimated shipping time</b></td>'+
'</tr>'+
'</table>';
var shippingDtl = data.data.service_name == "Any Other" ? data.data.service_any:data.data.service_name;
var tr = '<tr id="rowShippingDetails'+data.data.id+'">'+
'<td bgcolor="#FFFFFF" style="padding:7px" class="text-center">'+data.data.country_name+'</td>'+
'<td bgcolor="#FFFFFF" style="padding:7px" class="text-center"><span class="font2a1">For one quantity</span><br />'+data.data.cost_1_qty+'</td>'+
'<td bgcolor="#FFFFFF" style="padding:7px" class="text-center"><span class="font2a1">Each additional qty.</span><br />'+data.data.cost_many_qty+'</td>'+
'<td bgcolor="#FFFFFF" style="padding:7px" class="text-center">'+shippingDtl+'</td>'+
'<td bgcolor="#FFFFFF" style="padding:7px" class="text-center">'+data.data.shipping_time+' day(s)</td>'+
'</tr>';
$('#shippingRateDisplay').append(conShip);
$('#shippingDetails').append(tr);
}
}, 'json');
});
});
此代码基本上获取下拉列表中选择的国家/地区的运输详细信息并将其显示在表格中。该表有两行，第一行有列标题（如国家、费率、运输类型等），第二行显示从服务器返回的运输数据。
如果我删除表头和行创建代码，更简洁的代码将是：
//select the shipping country to display its shipping rate
$('#country').change(function() {
if($(this).val() == ""){
$('#shippingRateDisplay').html('<br /><span style="margin-left:8px">No country selected.</span>');
return false;
}
alert("Before ajax start");
$.post('ajax_utility/getShippingCostProdDtls/', { country_id: $(this).val(),
product_id: <?php echo $this->uri->segment(3); ?>,
current_currency: '<?php echo $product->currency->cur_id; ?>'}, function(data){ alert("Successful ajax, but chrome is not reaching here");
if(data.status != 1){
$('#shippingRateDisplay').html("Shipping rate not set for the specified country");
}
else{
$("#shippingRateDisplay").html("");
var conShip = 'THE_TABLE_HEADER';
var shippingDtl = data.data.service_name == "Any Other" ? data.data.service_any:data.data.service_name;
var tr = 'THE SHIPPING ROW CREATED WITH THE JSON DATA';
$('#shippingRateDisplay').append(conShip);
$('#shippingDetails').append(tr);
}
}, 'json');
});
});
服务器的一般响应之一是：
{
"data":{
"id":"4e6a274043ca1",
"product_id":"131315437838",
"country":"60",
"cost_1_qty":"$ 5.00 CAD",
"cost_many_qty":"$ 5.00 CAD",
"service_used":"7",
"service_any":"",
"shipping_time":"5",
"country_name":"French Guiana",
"service_name":"Express\/Expedited International Shipping"
},
"status":1
}
这段代码的问题是它在 IE 和 FF 中运行良好，但在 Chrome 中却有奇怪的行为。问题是，它在前几次工作得很好，然后就不行了。我重新启动了我的机器和 xampp，然后再次出现相同的行为，当我从下拉列表中选择一个国家/地区时，它第一次显示运输表，而第二次它根本没有响应。我检查了 chrome firebug 调试器，post 请求成功，它返回了 200 ok 响应以及 json 数据。但是它没有触发第二个警报，这意味着它没有进入回调函数（如果请求成功则执行）。
还要提一下，我没有为从服务器返回的响应设置内容类型。所以它的文本/ html。
以下是请求和响应标头
响应标头
Date: Sun, 11 Mar 2012 14:48:34 GMT
X-Powered-By: PHP/5.2.1
Connection: Keep-Alive
Content-Length: 282
Pragma: no-cache
Last-Modified: Sun, 11 Mar 2012 14:48:34 GMT
Server: Apache/2.2.4 (Win32) DAV/2 mod_ssl/2.2.4 OpenSSL/0.9.8d mod_autoindex_color PHP/5.2.1
Content-Type: text/html
cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Keep-Alive: timeout=5, max=99
Expires: Thu, 19 Nov 1981 08:52:00 GMT
请求标头
Content-Type: application/x-www-form-urlencoded
X-Requested-With: XMLHttpRequest
Accept: application/json, text/javascript, */*
关于为什么在ajax调用之后没有执行回调函数以及因此没有显示运输表的任何帮助将非常有帮助。谢谢你。
更新： 我更新了代码以使用 $.ajax，下面是我的代码：
$.ajax({
type: "post",
url: 'ajax_utility/getShippingCostProdDtls/',
timeout : 5000,
data: { country_id: $(this).val(),
product_id: '<?php echo $this->uri->segment(3); ?>',
current_currency: '<?php echo $product->currency->cur_id; ?>'},
dataType: "json",
success: displayShippingTable,
error: AjaxFailed
});
` function AjaxFailed(result){
alert("FAILED : " + result.status + ' ' + result.statusText);
警报（result.responseText）；
// displayShippingTable(result.responseText);
}
`
这在 Firefox 和 IE 上运行良好，但在 chrome 上它比以前更奇怪。当我在运输下拉菜单中选择或更改国家/地区时，控制台首先显示
发布 ajax_utility/getShippingCostProdDtls/ 200 OK 108 毫秒
然后在 5 秒超时后它说
POST ajax_utility/getShippingCostProdDtls/ 中止 108 毫秒
然后进入 AjaxFailed 函数并给出警报 FAILED : 200 OK 和从服务器返回的 json 数据
如果有人可以帮助我了解引擎盖上下发生的事情，那就太好了。谢谢你。