- ベストアンサー
リクエスト結果が一瞬しか表示されません。
AJAXについて質問です。 返ってきたリクエスト結果をそのままHTMLに表示させているのですが 一瞬だけ表示されたあとにすぐ消えてしまいます。 ajax通信成功時に実行される関数にconsole.logを記述しておくと、 やはり一瞬だけコンソール欄に表示されるだけです。 エラーは無しです。 こうなってしまう理由としてどんな要因が考えられますか？ どなたかご教授頂けたら嬉しいです。
- yashigani68
- お礼率75% (3/4)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 原因はサブミットの実行を止めていないからです。 search()を実行後にformのサブミットがかかってしまっているため、ページがリロードされています。 $("form").submit(function() { search(); return false; } こうすればお望みの動きになると思います。 ==== 動作確認サンプル http://hppg.moe.hm/okwave/qa/q7304105/
その他の回答 (3)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 なんでしょうね。動作確認に上プログラムはIEでもFirefoxでも同じ動きをしています。 サブミットのキャンセルが何かまずいのだとしたら、ボタンのtypeをbuttonにしてそのボタンをクリックで$.ajaxを実行するようにしてみてはどうでしょうか。
お礼
何度もすいません。 buttonをclickでもダメでした。 レスポンスは返っては来ているのですが an empty string となっています。 firebugで見ると返ってきたContent-Lengthというのが ７となっているので何らかのものは受け取っているのですが 表示はされていません。 ググっていたらfirefoxはコンテンツタイプに敏感という記事を 見つけたので、この辺をいじっているんですが改善されないですorz
- fujillin
- ベストアンサー率61% (1594/2576)
質問文からなんとなく想像されるのは、ajax処理の直後にリロードしてたりしませんか？ もちろん意図的ではないでしょうが、結果的にリロードするような処理がはしっていたり…
お礼
返信遅くなってしまいすいません。ありがとうございます。 たしかに一瞬で何かがリロードされてるようにも見えるのですが、 ajax通信成功時の関数はconsole.lpgのみで サーバーサイド側はechoだけなのでコードを見るかぎりでは リロードしそうなとこが見当たりません（汗）
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 ぱっと考えに浮かぶのは自分が想定していない処理が走ってしまい、消されてしまうロジックになってるとかです。 開示できる範囲でソース出してもらえれば原因を追えるかもしれません。
補足
補足が遅くなってしまいすいません。 回答ありがとうございます。 ｈｔｍｌファイル ｊｓファイル サーバーサイドの順で貼ります。 <html> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" ></script> <script type="text/javascript" src="../js/testes2.js"></script> </head> <body> <div id="header"> <form> <input type="text" id ="name" /> <input type="submit" value="送信" id="btn"/> </form> </div> <div id="nav1"> <ul></ul> </div> <div id="nav2"></div> <h2>aa</h2> <div id="nav3"></div> </body> ここまでｈｔｍｌ <!-- $(function(){ $("form").submit(function(){ search() }); var search = function(){ $.ajax({ url : "http://localhost/home/ファイル名", type : "GET", error : function(){ alert("エラー"); }, success : function(data){ var result = data; console.log(result); } }); }; }); // --> ここまでｊｓ <?php $tes = 'あいう'; echo $tes; ?> 以上です。 ブラウザはＩＥ８とfirefoxでプレビューしてますが同じ結果です。
お礼
ありがとうございます！ return false入れたらリロードされなくなりました。 ただＩＥだと上手く表示されるのですが 何故かFirefoxだと空のレスポンスが返ってきてるので思考錯誤しております。
補足
レスポンスが空だった理由がようやく判明しました。 サーバーサイドのプログラムは文字通りサーバーに(xamppのhtdocs内)に置いていたのですがｈｔｍｌとｊｓをマイドキュメントに入れたままエディタのプレビューで実行していたためステータスを受け取れていなかったようです。 逆になぜＩＥでは実行できていたのか謎です。 親切に回答していただきありがとうございました。