Ajaxによる非同期通信(5/5):初心者のためのjQueryプログラミング入門

Ajaxによる非同期通信 (5/5)

作成:2010-04-14 12:43
更新:2010-05-12 08:27

■Ajaxでフォームを送信する

多くのデータをサーバーに送る場合、通常はフォームを用意して送信します。Ajaxの場合、フォームを使った送信は使いません。……が、この「フォーム」というインターフェイスそのものは、便利ですし、みんなになじんたものですから、Ajaxでもそのまま利用できれば便利ですよね？

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>

※関連コンテンツ

<< prev next >>

「初心者のためのjQueryプログラミング入門」に戻る