back
Ajaxによる非同期通信 (5/5)
■Ajaxでフォームを送信する
多くのデータをサーバーに送る場合、通常はフォームを用意して送信します。Ajaxの場合、フォームを使った送信は使いません。……が、この「フォーム」というインターフェイスそのものは、便利ですし、みんなになじんたものですから、Ajaxでもそのまま利用できれば便利ですよね？
jQueryでは、フォームの「シリアライズ」という機能をもっています。これは、フォームの内容をテキストに変換する機能です。テキスト？ そう、つまり「フォームが実際に送信されるときの形式に従ったテキスト」として取り出すためのものなのです。
Webというのは、HTTPというプロトコルでデータをやり取りしていますが、これはすべてテキストでデータを送受するようになっています。フォームを送信するときも、Webブラウザがフォームの内容をHTTPで送信する形式（←これがテキスト）に変換してサーバーに送っているわけです。これと同じようにして、フォームの内容をテキストにしてパラメータに設定し、Ajax送信すれば、フォームの内容をまるごと送ることができます。
この「フォーム内容をテキストに変換する」作業を、シリアライズといいます。これは以下のようにして行います。
では、簡単な例を上げておきましょう。<select>のメニューと、<input type="text">の入力フィールドを持ったフォームを用意し、これをAjaxでサーバーに送信してみます。サーバー側では、受け取ったフォームの内容を元に、送り返すデータを用意し、それをJSON形式で送り返します。
jQueryでは、フォームの「シリアライズ」という機能をもっています。これは、フォームの内容をテキストに変換する機能です。テキスト？ そう、つまり「フォームが実際に送信されるときの形式に従ったテキスト」として取り出すためのものなのです。
Webというのは、HTTPというプロトコルでデータをやり取りしていますが、これはすべてテキストでデータを送受するようになっています。フォームを送信するときも、Webブラウザがフォームの内容をHTTPで送信する形式（←これがテキスト）に変換してサーバーに送っているわけです。これと同じようにして、フォームの内容をテキストにしてパラメータに設定し、Ajax送信すれば、フォームの内容をまるごと送ることができます。
この「フォーム内容をテキストに変換する」作業を、シリアライズといいます。これは以下のようにして行います。
変数 =《フォームのjQuery》.serialize();$(フォーム).serialize();というように、フォームのjQueryオブジェクトのserializeを呼び出すことで、そのフォームに用意されたコントロール類の値をすべてシリアライズしたテキストが取得されます。後は、これをパラメータとしてサーバーに送ればいいのです。
では、簡単な例を上げておきましょう。<select>のメニューと、<input type="text">の入力フィールドを持ったフォームを用意し、これをAjaxでサーバーに送信してみます。サーバー側では、受け取ったフォームの内容を元に、送り返すデータを用意し、それをJSON形式で送り返します。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
※サーバー側のスクリプト
<?php
$data =array(
array(message=>'ごめん、ない。', color=>'#666666', background=>'#AAAAAA'),
array(message=>'最初のデータです。', color=>'red', background=>'#FFCCCC'),
array(message=>'次のデータです。', color=>'green', background=>'#CCFFCC'),
array(message=>'最後のデータです。', color=>'blue', background=>'#CCCCFF')
);
$id = $_GET['id'] * 1;
if ($id < count($data)){
$result = $data[$id];
$result['message'] .= "<br>" . $_GET['msg'];
} else {
$result = $data[0];
}
header('Content-type:application/json; charset=utf8');
echo json_encode($result);
※Webページのソースコード
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<!--
function doAction(){
var str = $('#form1').serialize();
$.getJSON('getdata.php',str,callback,"json");
}
function callback(result,status){
$('#message').css('color',result.color);
$('#message').css('background',result.background);
$('#message').html('受信データ：' + result.message);
}
//-->
</script>
</head>
<body>
<H1>TEST.</H1>
<div class="msg" id="message">テキストをここに表示します。</div>
<form id="form1" onsubmit="return false;">
<select name="id">
<option value="0">-</option>
<option value="1">１番目</option>
<option value="2">２番目</option>
<option value="3">３番目</option>
</select><br>
<input type="text" name="msg">
</form>
<input type="button" onclick="doAction();" value="Click">
</body>
</html>
| << 前へ |