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で取得する。まあ、ミスですよね。どちらかというと。


エラーメッセージ大事

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

    I'm a web designer/programmer in Kyoto, Japan. Also work as a blogger, DJ.

    NOBODY:PLACE is my personal blog since 1998. Everything I'm interested in is here.

    See Also
    Other Works
    Feed
  • Recent Hatena Bookmark
  • Monthly Archives
    Categories