jQueryを利用してPHPにデータをPOSTし、Ajax通信をおこないます。
※HTTPS化に伴い、現在本記事内のデモ画面は利用できない状態です。
ajax.html(デモ画面)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!DOCTYPE html> <html> <head> <title>PHPとの間でAjax通信をおこなう</title> <meta charset="utf-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script type='text/javascript'> $(document).ready(function(){ $("#submit_bt").click(function(event){ //フォームが通常の動きをしないように event.preventDefault(); //初期化 $("#ajax_result").empty(); test(); }); }); function test(){ var word_val1=$("#word_id1").val(); var word_val2=$("#word_id2").val(); $.ajax({ type: 'POST', url: './test.php', data:{ word1:word_val1, word2:word_val2 }, dataType: 'html', }) //$.post('./test.php', {word1:word_val1,word2:word_val2}) .done(function(data, status, jqXHR){ $("#ajax_result").html(data); //$("#ajax_result").html(data.word1 +"と"+ data.word2);//PHPからJSON形式で返ってくる場合 }) .fail(function(jqXHR, status, error){ $("#ajax_result").html("エラーです"); }) .always(function(jqXHR, status){ console.log(status); }); } </script> <head> <body> <form method="post"> <input type="text" value="りんご" name="word1" id="word_id1" /> <input type="text" value="バナナ" name="word2" id="word_id2" /> <input type="submit" value="送信" id="submit_bt" /> </form> <div id="ajax_result"></div> </body> </html> |
6行目
jQueryのバージョンはHosted Librariesを参照。
26〜34行目
$.ajax関数を利用して、非同期通信を実行しています。汎用的な$.ajax関数の代わりに、35行目のPOST形式専用$.post関数を利用することもできます。オプション(上記コードのtypeやurlの部分)に関しては公式ページ等をjQuery.ajax() をご覧下さい。
33行目
dataType
返ってくるデータの型を指定します。デモ画面ではPHP(test.php)からHTMLが返ってくるので、htmlを指定しています。もしtest.phpの8行目のようにJSON形式で返ってくる場合には、「dataType: ‘json’」のように指定します。このdataTypeオプションを指定しない場合(デフォルト)は自動で形式を判定してくれます。
36行目
done
Ajax通信が正常におこなわれた場合に呼ばれます。コールバック関数の引数dataにはPHPから返ってきたデータが入ります。デモ画面ではPHPからHTML形式が返ってきますが、もしtest.phpの8行目のようにJSON形式で返ってくる場合には、38行目のように処理をおこないます。
40行目
fail
Ajax通信がエラーの場合に呼ばれます。
43行目
always
Ajax通信が正常およびエラーいずれの場合も完了時に呼ばれます。
test.php(※下記コードはセキュリティ等の考慮はしていません。)
1 2 3 4 5 6 7 8 |
<?php $word1 = $_POST['word1']; $word2 = $_POST['word2']; echo "<p>{$word1}と{$word2}を入力しました。</p>"; //echo json_encode(array("word1"=>$word1,"word2"=>$word2));//JSON形式で返す場合 |
関連ページ
JSONPをjQueryで利用する[Ajax][カーリルAPI]
Ajax通信の処理状況を判定する[ajaxStart][ajaxStop]
参照ページ