PHP&Ajax


hoge.phpにアクセスすると

<form action="./" method="post">
<input type="text" name="hog">
<input type="submit" value="Submit!">
</form>

というHTMLが表示されます。で、submitするとAjaxで画面が切り替わり1秒間画像が表示されPHPでPOSTされたデータ処理後の結果を表示するにはどうすればいいのでしょうか?

PHPのほうは大丈夫なのですがAjaxが分からないのでその方法(ソースなど)をお願いします。

回答の条件
  • 1人3回まで
  • 登録:2006/05/19 00:26:53
  • 終了:2006/05/26 00:30:05

回答(3件)

id:ekusutasii No.1

ekusutasii回答回数224ベストアンサー獲得回数02006/05/19 04:41:26

ポイント27pt

それでもあなたはすごいと俺はおもいます。

id:esecua

おねがいですから質問を理解したうえで回答してください。ノーポイントです。

2006/05/19 08:56:19
id:llusall No.2

llusall回答回数505ベストアンサー獲得回数612006/05/19 10:56:55

ポイント27pt

>Ajaxで画面が切り替わり

という仕様がよくわからないのですが、

Ajaxで、何か表示する情報を取ってきて表示するということとして回答します。



<form action="./" method="post" name="frm" >

    <input type="text" name="hog">

    <input type="button" value="Submit!" onclick="shori();">

</form>

Ajax取得内容が表示:<div id="idRes"></div>

<SCRIPT LANGUAGE=JavaScript>

<!--

function shori(){

    //Ajax

    url = "./hoge.txt"; //表示する内容(phpにしても良)

    var xmlHttp;

    try {

        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

    } catch(e) {

        xmlHttp=new XMLHttpRequest();

    }

    xmlHttp.open("GET",url,false);

    xmlHttp.send(null);

    //レスポンスを取得

    var res  = xmlHttp.responseText;

    //画面に表示

    document.all.idRes.innerText = res;

    //1秒後にPOST

    setTimeout("document.frm.submit();", 1000);

}

//なお、動作確認はしてありません。

//あくまでも、シンプルなサンプルとしてお考えください。


[参考]

Ajaxを勉強しよう

http://www.openspc2.org/JavaScript/Ajax/Ajax_study/

Ajaxはじめの一歩 XMLHttpRequest

http://allabout.co.jp/internet/javascript/closeup/CU20050515A/in...

id:esecua

その方法は http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter04... なようなものですよね。

そうではなくてsubmitを押すと完全に画面が切り替わり結果が表示されるような感じです。こんな感じ⇒ http://f.hatena.ne.jp/esecua/20060519163325

2006/05/19 16:34:30
id:kazu1107 No.3

kazu1107回答回数199ベストアンサー獲得回数142006/05/21 03:21:42

ポイント26pt

http://f.hatena.ne.jp/esecua/20060519163325

参照しましたが、結局これは検索前と検索結果表示部分は従来のGoogleなどのような動作にしたいけど、そこに処理中を表す画像を表示したいということでしょうか?(そういうことでないならAjaxを使う利点がありません)

先ほどesecua様が出された

http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter04/003...

のサンプルを元に説明すると、CGIにデータを送ると

$("result").innerHTML = "Wait...";

という文が実行され、待ち時間になり、データが返ってくると

$("result").innerHTML = httpObj.responseText;

が実行され、データが代入されます。

$("result").innerHTMLの実体は<div id="result"></div>なので、最終的には

<div id="result">Send Message</div>

とHTMLで記述するのと同じデータ構造になるという一連の流れです。

これを応用し、たとえばid="result"を<body>に対して設定するとデータが送られた後は

<body id="result">Send Message</body>

と記述されたのと同じ状態になりますから、CGIが<body>内部のデータを吐けば画面全体が切り替わった感じになると思います。

Wait時に画像を表示したいというなら同じ要領でどこかにから要素の<div>を作り、Wait時のみ中身に<img>タグを代入すればいいと思います。(それかCSSのdisplay要素を"none"と"block"で切り替えるなど)

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません