Question

我遇到的问题的代码段是：

//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。

以下是请求和响应标头

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 GMT

RequestHeaders

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 });

` 函数AjaxFailed（结果）{
      alert（“FAILED：”+ result.status +''+ result.statusText）;
      警报（result.responseText）;
    // displayShippingTable（result.responseText）;

`

这在Firefox和IE上运行良好，但在Chrome上比以前更奇怪。当我在发货下拉菜单中选择或更改国家/地区时，控制台首先会说

POST ajax_utility / getShippingCostProdDtls / 200 OK 108ms

然后在5秒超时后说

POST ajax_utility / getShippingCostProdDtls / Aborted 108ms

然后输入AjaxFailed函数并发出警告FAILED：200 OK 和从服务器返回的json数据

如果有人可以帮助我理解幕后发生的事情，那将是非常棒的。谢谢。

Answer 1

好的，最后我自己解决了。好吧，虽然没有完全解决。我在这里忘记提到的一件重要事情是我正在使用的应用程序是使用jquery 1.3.2。我想好了，让我们为这个页面使用最新的jquery，以便我可以试用promise interface.

当我通过包含jquery jquery-1.7.1.min.js来运行页面时，问题立即消失了。运输表装载绝对正常。所以我猜它是由于jquery版本和chrome之间的错误或不兼容。因此在我的情况下升级jquery版本修复了问题。

Jquery $ .post不在chrome上工作但在IE和FF中工作

1 个答案: