Jquery $.post不使用chrome，而是在IE和FF中工作。
Jquery $.post不使用chrome，而是在IE和FF中工作。
提问于 2012-03-11 06:58:05
我所面临的问题的代码片段是：
//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调试器，post请求是成功的，它返回了一个200 ok响应和json数据。但是，它未能触发第二个警报，这意味着它没有输入回调函数(如果请求成功，将执行回调函数)。
另外，我没有为从服务器返回的响应设置内容类型。所以它的text/html。
以下是请求和响应头
ResponseHeaders
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 GMTRequestHeaders
Content-Type: application/x-www-form-urlencoded
X-Requested-With: XMLHttpRequest
Accept: application/json, text/javascript, */*任何关于为什么在ajax调用之后没有执行回调函数以及因此没有显示配送表的任何帮助都是非常有用的。谢谢。
更新：I更新了代码以使用$.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` `});`函数AjaxFailed(结果){
alert("FAILED : " + result.status + ' ' + result.statusText); alert(result.responseText); // displayShippingTable(result.responseText); } `
这在Firefox和IE上运行得很好，但在chrome上却比以前更奇怪。当我在运输中选择或更改一个国家时，控制台首先表示
POST ajax_U实用程序/getShippingCostProdDtls/ 200 OK 108 OK
然后在5秒超时后，上面写着
POST ajax_U实用程序/getShippingCostProdDtls/中止108
然后进入AjaxFailed函数，发出警报失败: 200 OK和从服务器返回的json数据。
如果有人能帮助我了解正在发生的事情，那就太好了。谢谢。
回答 1
Stack Overflow用户
发布于 2012-03-12 20:26:22
好吧，终于我自己解决了。不过还没完全解决。这里我忘记提到的一件重要事情是我正在使用的应用程序是使用jQuery1.3.2。我想得很好，让我们为这个页面使用最新的jquery，这样我就可以试用承诺界面。了。
当我通过包含jQueryjQuery1.7.1.min.js运行页面时，问题立即消失了。装运表装得非常好。因此，我想这是由于jquery版本与chrome之间存在缺陷或不兼容所致。因此，在我的例子中，升级jquery版本解决了问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9656009
复制相关文章
点击加载更多
相似问题
R Openxlsx包(版本4.2.2) -文件中的错误(description= xlsxFile)：无效的'description‘参数
Osmar package in R "Error in file(con，"r")：无法打开连接“
将Excel数据导入R
将excel数据导入R
R openxlsx Excel导出: XML错误
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
