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でアクセスし、受け取ったテキストを表示するサンプルを作成してみましょう。下のリスト部分に掲載したのが、その例です(2番目のリスト)。ここでは、以下のようにしてloadを呼び出しています。
こうした場合、こちらからパラメータとして必要な値をサーバーに送信し、それを受け取ったサーバー側のプログラムが、パラメータに応じた値を送り返してくる、といった形になります。そこで、loadでパラメータを送信するにはどうするか、やってみましょう。
まず、サーバー側にプログラムを用意する必要があります。ここでは、Webページと同じ場所に「getdata.php」というPHPスクリプトを設置することにしましょう。このスクリプトでは「id=番号」という形のパラメータを受け取り、その番号に応じて値を出力するようにします。(※下のリスト部分に、簡単なサンプルコードをあげておきます)
では、このgetdata.phpにAjaxでアクセスし、受け取ったテキストを表示するサンプルを作成してみましょう。下のリスト部分に掲載したのが、その例です(2番目のリスト)。ここでは、以下のようにしてloadを呼び出しています。
《jQuery》.load( アドレス , パラメータ );第2引数に、送信するパラメータの情報を渡しています。これは、パラメータ名をキーとする連想配列の形になっています。このようにして、必要なデータをいくらでもまとめてサーバーに送ることができるのです。
(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">1番目</option> <option value="2">2番目</option> <option value="3">3番目</option> </select> </body> </html>
※関連コンテンツ