jQueryとPHPでAJAX通信を行う

jQueryとPHPでAJAX通信を行う基本。

以下はjQueryの$.ajaxでデータをphpに渡し、php側でデータを処理して再びjQueryで受け取る処理の雛形です。

例として、ボタンをクリックするとインプット欄の日付を取得してphpに渡し、phpは渡された日付のデータをjQuery側に返すというプログラムを書いてみます。

jQuery側

<input type='date' name='date'>
<button>呼び出し</button>
<script>
jQuery(function($){
  $('button').click(function(){
    var day = $('input[name=date]').val();//インプット欄の日付を取得
    
    $.ajax({
      type: 'POST',
      dataType:'json',
      url:'api.php',
      data:{
        item:day
      },
      success:function(data) {
        alert(data);
      },
      error:function(XMLHttpRequest, textStatus, errorThrown) {
      
      }
    });
});
</script>

PHP側

//api.php
<?php
  $day = $_POST['item'];//ポストで受け取れる
  //略
  $html = "戻り値";
  
  header('Content-type: application/json');//指定されたデータタイプに応じたヘッダーを出力する
  echo json_encode( $html );

基本は以上です。

ここでは$.ajaxを使っていますが、ajax通信を行うjQueryのメソッドは他に$.load、$.get、$.post、$.getJSON、$.getScriptが存在し、目的によってはこれらを使った方がシンプルなものになるでしょう。最も多機能で多くのことができるのは$.ajaxです。$.loadや$.getなどで出来ることで$.ajaxにできないことはありませんが、$.ajaxで可能なことの多くを$.loadや$.getではできません。

$.ajaxでのPHPへのデータの渡し方ですが、script内の9行目のdata:{day:day}の部分で指定しています。オブジェクトでデータを渡すと、プロパティがPHPが受け取る配列のキーとなるわけです。data:{foo:'引数'}なら、PHP側は$_POST[‘foo’]で’引数’を受け取ることになります。

dataTypeはここではjsonを使っていますが、他にもxml、html、script、jsonp、textが指定可能です。PHP側で出力させたい内容に応じて指定します。

dataTypeにjsonを指定した場合、PHPで出力する際はheader('Content-type: application/json');を書いてからjson_encode()を通したものをプリントします。ここでプリントしたものが$.ajaxのsuccess:function(data){}に渡されます。

受け取ったデータの処理はsuccess:function(data){}内に書きます。

ajax通信に失敗した際の処理はerror:function(XMLHttpRequest, status, errorThrown){}に書きます。