jQueryでPOSTできない


Pocket

jQueryを使ってPOSTするコードを書いたときにハマった・・・(´・ω・`)

以前作った『3D Stamp Maker』の改良を行っていたところいきなりPOSTができなくなった。
さっきまで問題なく動いていたように見えたんですけど・・・なぜ?
しかもたちが悪かったのは、Chromだと問題なく動くけどFirefoxだと動かないという。
まぁ、ブラウザが原因ではなかった訳ですが、どハマりしました。

真の原因は分からないままですが、回避方法がわかったのでメモメモ。

 

問題コード

jQueryを使ってPOSTした後に、別の場所からlocation.hrefを使ってファイルをダウンロードするコードを下記のような感じで書きました。

function download() {
  $.ajax({
    type:'POST',
    url:'download/',
    data:{"data" : data },
    success : function(data) {
      },
    error : function(req, textStatus, errorThrown) {
      alert("Error:" + textStatus + "/" + errorThrown.message);
    }
  });
  location.href="get/?dat="+data;
}

初めは問題なく動いていたのですが、他のコードをいじっている内にPOSTが送信されなくなっていることに気づきました。

textStatus : error
errorThrown.message : undefined

POSTは送信されないけど、その後のGETは送信されるという状態です。

 

とりあえずの原因

とりあえずの原因は、POSTの直後にlocation.hrefをやってるからでした。
ためにし、POST後にWait処理を追加してやるとちゃんとPOSTが送信されるようになりました。

Chromで動いてFirefoxで動かなくなったのは、単純に処理時間の違いによるものだったようです。

  setTimeout(function(){
    location.href="get/?dat="+data;
  }, 1000);

ということで、最終的にはPOSTの成功イベント内(success:)でlocation.hrefをするように修正しました。

ただ、結局原因は何だんだろうという疑問は残ったまま。
・POSTとGETは同時にできないの?
・POSTとlocation.hrefは同時にできない?
まだまだWebプログラムは経験不足&勉強不足なのでさっぱりです。

 

あとがき

思わぬところでどハマりして半日潰しました。
今回のことで痛感したのは、バグ原因を特定するためのノウハウを持っていないということ。

原因を探るための情報の集め方が分からない。
textStatus : error
errorThrown.message : undefined
だけで、どうしろと・・・と言った感じ。
結局手当たり次第に検証用コードを書いては試してみるってのを繰り返して、とても疲れた。

まぁ経験を積めばなんとかなるものなのか・・・それとも、独学では厳しいものなのか・・・。
なんにせよ今回は疲れました。
 
 

Leave a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>