Ajaxによる非同期通信 (2/5)
作成:2010-04-14 09:52
更新:2010-05-12 08:11
更新:2010-05-12 08:11
■パラメータを送るには？
単純にテキストファイルの中身などを受け取るなら、このように非常にシンプルです。が、実際には、Ajaxというのは、必要に応じて的確にデータを取得するのに用いられることが多いでしょう。こちらから「このデータを送って！」と要求し、それを受け取る、という感じです。
こうした場合、こちらからパラメータとして必要な値をサーバーに送信し、それを受け取ったサーバー側のプログラムが、パラメータに応じた値を送り返してくる、といった形になります。そこで、loadでパラメータを送信するにはどうするか、やってみましょう。
まず、サーバー側にプログラムを用意する必要があります。ここでは、Webページと同じ場所に「getdata.php」というPHPスクリプトを設置することにしましょう。このスクリプトでは「id=番号」という形のパラメータを受け取り、その番号に応じて値を出力するようにします。（※下のリスト部分に、簡単なサンプルコードをあげておきます）
では、このgetdata.phpにAjaxでアクセスし、受け取ったテキストを表示するサンプルを作成してみましょう。下のリスト部分に掲載したのが、その例です（２番目のリスト）。ここでは、以下のようにしてloadを呼び出しています。
こうした場合、こちらからパラメータとして必要な値をサーバーに送信し、それを受け取ったサーバー側のプログラムが、パラメータに応じた値を送り返してくる、といった形になります。そこで、loadでパラメータを送信するにはどうするか、やってみましょう。
まず、サーバー側にプログラムを用意する必要があります。ここでは、Webページと同じ場所に「getdata.php」というPHPスクリプトを設置することにしましょう。このスクリプトでは「id=番号」という形のパラメータを受け取り、その番号に応じて値を出力するようにします。（※下のリスト部分に、簡単なサンプルコードをあげておきます）
では、このgetdata.phpにAjaxでアクセスし、受け取ったテキストを表示するサンプルを作成してみましょう。下のリスト部分に掲載したのが、その例です（２番目のリスト）。ここでは、以下のようにしてloadを呼び出しています。
《jQuery》.load( アドレス , パラメータ );第２引数に、送信するパラメータの情報を渡しています。これは、パラメータ名をキーとする連想配列の形になっています。このようにして、必要なデータをいくらでもまとめてサーバーに送ることができるのです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
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">１番目</option>
<option value="2">２番目</option>
<option value="3">３番目</option>
</select>
</body>
</html>
※関連コンテンツ