【メモ】jQueryのPOST通信エラー

5aeea1845616c563c675a7c6424b9d21_s.jpg

jQueryのajax関数で送信したときのエラーをハンドリングすると、

  • textStatus : error
  • errorThrown.message: 空

となって原因の特定に時間が掛かってしまいましたが、解決後に症状と原因を考えて列挙するとこんな感じ。

スクリプトの流れ

  1. フォームを生成
  2. buttonをクリックし、イベントハンドラでAjax処理
  3. 引数を付加してPOST通信
  4. サーバ側でDB処理を行う
  5. 成功したらページを再読込み


サンプルコード

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

参考

jQueryのAjax関数使用時の注意点 – Qiita


一部の処理で処理後にGET送信が送られてURLが書き換わってしまう

button要素がform内にあって、イベントハンドラの処理が行われたあと、formの処理も行われてしまっていた。ちなみにFirefoxのみで、Chromeの場合はformの処理は行われない。

解決方法

form要素の削除。送信データはIDで取得する。まあ、ミスですよね。どちらかというと。


エラーメッセージ大事

わかってしまえば単純なこと、単純なミスなんですが、エラーメッセージが出ないとしんどい。うーむ。