私が直面している問題のコード スニペットは次のとおりです。
//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');
});
});
このコードは基本的に、ドロップダウンで選択された国の配送の詳細を取得し、表に表示します。テーブルには 2 つの行があり、最初の行には列見出し (国、料金、配送タイプなど) があり、2 行目にはサーバーから返された配送データが表示されます。
テーブル ヘッダーと行作成コードを削除した場合、よりクリーンなコードは次のようになります。
//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');
});
});
サーバーからの一般的な応答の 1 つは次のとおりです。
{
"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 を再起動しましたが、同じ動作で、ドロップダウンから国を選択したときに初めて配送表が表示され、2 回目からはまったく応答しませんでした。Chrome firebug デバッガーを確認すると、投稿リクエストが成功し、json データとともに 200 ok 応答が返されました。しかし、2 番目のアラートを発生させることができませんでした。つまり、コールバック関数 (要求が成功した場合に実行される関数) に入らなかったことを意味します。
また、サーバーから返される応答のコンテンツ タイプを設定していません。そのテキスト/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 では以前よりも奇妙です。配送ドロップダウンで国を選択または変更すると、コンソールに最初に次のように表示されます
POST ajax_utility/getShippingCostProdDtls/ 200 OK 108ms
その後、5秒のタイムアウトの後、それは言う
POST ajax_utility/getShippingCostProdDtls/ 中止 108ms
その後、AjaxFailed 関数に入り、アラート FAILED : 200 OK と、サーバーから返された json データが表示されます
ボンネットの上と下で何が起こっているのかを誰かが理解するのを手伝ってくれたら、それは素晴らしいことです. ありがとうございました。