jQueryのajax関数で送信したときのエラーをハンドリングすると、
- textStatus : error
- errorThrown.message: 空
となって原因の特定に時間が掛かってしまいましたが、解決後に症状と原因を考えて列挙するとこんな感じ。
スクリプトの流れ
- フォームを生成
- buttonをクリックし、イベントハンドラでAjax処理
- 引数を付加してPOST通信
- サーバ側でDB処理を行う
- 成功したらページを再読込み
サンプルコード
$.ajax({
type : 'post',
url : 'sample.php',
data : {
'id' : 'sampleID'
}
}).done(function(data, textStatus, jqXHR) {
// ページを再読み込み
window.location.reload(true);
}).fail(function(jqXHR, textStatus, errorThrown) {
console.log(textStatus);
console.log(errorThrown);
});
Firefoxのみ処理が正常に行われない。
Chromeだと問題なく動くのに、Firefoxだと動かない。具体的には、DB処理が更新の場合に、Chromeだと更新されるがFirefoxだと更新されない。処理順の問題か、処理の時間の問題か?ページの再読込は行われる。解決方法
オプション「async」に「false」を設定。$.ajax({
type : 'post',
url : 'sample.php',
async : false,
data : {
'id' : 'sampleID'
}
}).done(function(data, textStatus, jqXHR) {
// ページを再読み込み
window.location.reload(true);
}).fail(function(jqXHR, textStatus, errorThrown) {
console.log(textStatus);
console.log(errorThrown);
});