人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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が分からないのでその方法(ソースなど)をお願いします。

●質問者: esecua
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:Ajax hoge HTML PHP アクセス
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● ekusutasii
●27ポイント

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

◎質問者からの返答

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


2 ● llusall
●27ポイント

>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...

◎質問者からの返答

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

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


3 ● kazu1107
●26ポイント

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"で切り替えるなど)

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ