リクエスト結果が一瞬しか表示されません。

解決済

質問者：yashigani68
質問日時：2012/02/14 04:21
回答数：4件

AJAXについて質問です。

返ってきたリクエスト結果をそのままHTMLに表示させているのですが

一瞬だけ表示されたあとにすぐ消えてしまいます。

ajax通信成功時に実行される関数にconsole.logを記述しておくと、

やはり一瞬だけコンソール欄に表示されるだけです。

エラーは無しです。

こうなってしまう理由としてどんな要因が考えられますか？

どなたかご教授頂けたら嬉しいです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： LancerVII
回答日時：2012/02/14 15:28

こんにちは。

原因はサブミットの実行を止めていないからです。

search()を実行後にformのサブミットがかかってしまっているため、ページがリロードされています。

$("form").submit(function() {
search();
return false;
}

こうすればお望みの動きになると思います。

==== 動作確認サンプル
http://hppg.moe.hm/okwave/qa/q7304105/

この回答への補足

レスポンスが空だった理由がようやく判明しました。
サーバーサイドのプログラムは文字通りサーバーに(xamppのhtdocs内)に置いていたのですがｈｔｍｌとｊｓをマイドキュメントに入れたままエディタのプレビューで実行していたためステータスを受け取れていなかったようです。
逆になぜＩＥでは実行できていたのか謎です。
親切に回答していただきありがとうございました。

補足日時：2012/02/15 04:11

通報する

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！
return false入れたらリロードされなくなりました。
ただＩＥだと上手く表示されるのですが
何故かFirefoxだと空のレスポンスが返ってきてるので思考錯誤しております。

通報する

お礼日時：2012/02/14 17:51

No.4

回答者： LancerVII
回答日時：2012/02/14 19:13

こんにちは。

なんでしょうね。動作確認に上プログラムはIEでもFirefoxでも同じ動きをしています。

サブミットのキャンセルが何かまずいのだとしたら、ボタンのtypeをbuttonにしてそのボタンをクリックで$.ajaxを実行するようにしてみてはどうでしょうか。

- 0
- 件

通報する

この回答へのお礼

何度もすいません。
buttonをclickでもダメでした。
レスポンスは返っては来ているのですが
an empty string
となっています。
firebugで見ると返ってきたContent-Lengthというのが
７となっているので何らかのものは受け取っているのですが
表示はされていません。
ググっていたらfirefoxはコンテンツタイプに敏感という記事を
見つけたので、この辺をいじっているんですが改善されないですorz

通報する

お礼日時：2012/02/14 22:00

No.2

回答者： fujillin
回答日時：2012/02/14 08:52

質問文からなんとなく想像されるのは、ajax処理の直後にリロードしてたりしませんか？

もちろん意図的ではないでしょうが、結果的にリロードするような処理がはしっていたり…

- 0
- 件

通報する

この回答へのお礼

返信遅くなってしまいすいません。ありがとうございます。
たしかに一瞬で何かがリロードされてるようにも見えるのですが、
ajax通信成功時の関数はconsole.lpgのみで
サーバーサイド側はechoだけなのでコードを見るかぎりでは
リロードしそうなとこが見当たりません（汗）

通報する

お礼日時：2012/02/14 14:48

No.1

回答者： LancerVII
回答日時：2012/02/14 07:14

こんにちは。

ぱっと考えに浮かぶのは自分が想定していない処理が走ってしまい、消されてしまうロジックになってるとかです。
開示できる範囲でソース出してもらえれば原因を追えるかもしれません。

この回答への補足

補足が遅くなってしまいすいません。
回答ありがとうございます。
ｈｔｍｌファイル
ｊｓファイル
サーバーサイドの順で貼ります。

<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/ …
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>
ここまでｈｔｍｌ

ここまでｊｓ
<?php
$tes = 'あいう';
echo $tes;
?>

以上です。

ブラウザはＩＥ８とfirefoxでプレビューしてますが同じ結果です。