libro
www.tuyano.com
初心者のためのjQueryプログラミング入門

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

作成:2010-04-14 09:52
更新:2010-05-12 08:11

■パラメータを送るには?

単純にテキストファイルの中身などを受け取るなら、このように非常にシンプルです。が、実際には、Ajaxというのは、必要に応じて的確にデータを取得するのに用いられることが多いでしょう。こちらから「このデータを送って!」と要求し、それを受け取る、という感じです。

こうした場合、こちらからパラメータとして必要な値をサーバーに送信し、それを受け取ったサーバー側のプログラムが、パラメータに応じた値を送り返してくる、といった形になります。そこで、loadでパラメータを送信するにはどうするか、やってみましょう。

まず、サーバー側にプログラムを用意する必要があります。ここでは、Webページと同じ場所に「getdata.php」というPHPスクリプトを設置することにしましょう。このスクリプトでは「id=番号」という形のパラメータを受け取り、その番号に応じて値を出力するようにします。(※下のリスト部分に、簡単なサンプルコードをあげておきます)

では、このgetdata.phpにAjaxでアクセスし、受け取ったテキストを表示するサンプルを作成してみましょう。下のリスト部分に掲載したのが、その例です(2番目のリスト)。ここでは、以下のようにしてloadを呼び出しています。
《jQuery》.load( アドレス , パラメータ );
第2引数に、送信するパラメータの情報を渡しています。これは、パラメータ名をキーとする連想配列の形になっています。このようにして、必要なデータをいくらでもまとめてサーバーに送ることができるのです。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

※サーバー側「getdata.php」のソースコード

<?php
$id = $_POST['id'] * 1;
$result = "ごめん、ない。";
switch($id){
case 1:
	$result = "最初のデータです。";
	break;
case 2:
	$result = "次のデータです。";
	break;
case 3:
	$result = "最後のデータです。";
	break;
}
header('Content-type:text/plain; charset=utf8');
echo $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 id = $('#list1').val();
			$('#message').load('getdata.php',{id:id});
		}
		//-->
		</script>
	</head>
	<body>
		<H1>TEST.</H1>
		<div class="msg" id="message">テキストをここに表示します。</div>
		<select id="list1" onchange="doAction();">
			<option value="0">-</option>
			<option value="1">1番目</option>
			<option value="2">2番目</option>
			<option value="3">3番目</option>
		</select>
	</body>
</html>

※関連コンテンツ

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