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
だけで、どうしろと・・・と言った感じ。
結局手当たり次第に検証用コードを書いては試してみるってのを繰り返して、とても疲れた。
まぁ経験を積めばなんとかなるものなのか・・・それとも、独学では厳しいものなのか・・・。
なんにせよ今回は疲れました。
