文章/答案/技术大牛

发布

社区首页 >问答首页 >Jquery $.post不使用chrome，而是在IE和FF中工作。

问Jquery $.post不使用chrome，而是在IE和FF中工作。
EN

Stack Overflow用户

提问于 2012-03-11 14:58:05

回答 1查看 2.4K关注 0票数 0

我所面临的问题的代码片段是：

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

RequestHeaders

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数据。

如果有人能帮助我了解正在发生的事情，那就太好了。谢谢。

jquery

json

post

jquery-post

回答 1

Stack Overflow用户

发布于 2012-03-13 04:26:22

好吧，终于我自己解决了。不过还没完全解决。这里我忘记提到的一件重要事情是我正在使用的应用程序是使用jQuery1.3.2。我想得很好，让我们为这个页面使用最新的jquery，这样我就可以试用承诺界面。了。

当我通过包含jQueryjQuery1.7.1.min.js运行页面时，问题立即消失了。装运表装得非常好。因此，我想这是由于jquery版本与chrome之间存在缺陷或不兼容所致。因此，在我的例子中，升级jquery版本解决了问题。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/9656009

复制

相似问题

问Jquery $.post不使用chrome，而是在IE和FF中工作。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery $.post不使用chrome，而是在IE和FF中工作。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery $.post不使用chrome，而是在IE和FF中工作。
EN