トップページ / AjaxによるForm送信

AjaxによるForm送信

スポンサードリンク

prototype.jsのAjax.RequestとForm.serializeを組み合わせる bookmark

prototype.jsのAjax.RequestではAjaxによってサーバへリクエストの処理が行えます。そして、Form.serializeという便利な機能もあって、これはフォームの内容を、a=b&c=dのようなサーバに送信しやすい形にしてくれるものです。

コードを見てみよう bookmark

コードの解説 bookmark

ボタンをクリックするとexecute関数が呼ばれるようになっています。
クリック時に、Form.serialize('form1')とすることで、フォーム内の内容を1行の文字列にしています。その後、Ajax.Requestを使ってサーバにリクエストします。onSuccessによって、成功時にはサーバからのレスポンスを表示するようにしています。

ここで使ったバックエンド用のサンプルプログラムは次のような感じです。phpで書いています。

Ajaxを使ったサンプルでは、成功時に、バックエンドのメッセージである「データを書き込みました」をそのままalertで出すようにしています。

戻る: JavaScript応用編&TIPS

スポンサードリンク


AX