AJAXとは？

AJAXは、ページを再読み込みせずに、サーバーとデータをやり取りする方法です。

例えば、施設を選択すると、その施設に登録されている医師名を取得して画面に表示することができます。

ページ全体を再読み込みせず、必要なデータだけを取得できます。

サンプルコード

以下は、選択した施設名をサーバーに送り、医師名を取得する例です。

function setDoctorName() {
    var facility_name = document.FormJoin.facility_name.value;

    $.ajax({
        url: 'getDoctorName.php',
        type: 'POST',
        dataType: 'json',
        data: { 'facility_name': facility_name },

        success: function (data) {
            var $sel = $('#doctor_name');
            $sel.empty();

            data.forEach(function(name) {
                $sel.append(
                    '<option value="' + name + '">' + name + '</option>'
                );
            });
        },

        error: function() {
            $('#doctor_name').empty().append(
                '<option value="">データ取得エラー</option>'
            );
        }
    });
}

コード説明

まず、選択した施設名を取得します。

var facility_name = document.FormJoin.facility_name.value;

次に、$.ajax()を使ってサーバーにデータを送ります。

$.ajax({
    url: 'getDoctorName.php',
    type: 'POST',
    dataType: 'json',
    data: { 'facility_name': facility_name }
});

urlは、データを送るPHPファイルです。

url: 'getDoctorName.php'

typeは、データを送る方法です。

type: 'POST'

ここではPOSTを使ってデータを送ります。

dataは、PHPに送るデータです。

data: { 'facility_name': facility_name }

選択した施設名をPHPに送ります。

データを正常に取得できた場合は、successが実行されます。

success: function (data) {
    // 取得したデータを処理
}

取得した医師名をdoctor_nameに追加して、画面に表示します。

データを取得できなかった場合は、errorが実行されます。

error: function() {
    // エラー処理
}

まとめ

AJAXの流れは、簡単にすると以下のようになります。

JavaScript → PHP → Database → PHP → JavaScript

今回の例では、

施設を選択 → PHPに施設名を送る → 医師名を検索 → データを取得 → 画面に表示

という流れになります。

AJAXを使うことで、ページを再読み込みせずに、必要なデータを取得して画面に表示できます。