Ajaxを使って画面をリロードせずにPHPを動かす（初心者向け）

JavaScriptを使えば、画面上の表示を変えることは簡単にできます。

しかし、DB上のデータなどを利用する時には、普通は画面をリロードしなくてはなりません。

これををリロードせずに行うためには、Ajaxという技術が必要になります。

今回はこのAjaxを使って、サーバ上のPHPファイルを動かす方法について解説していきます。

Ajaxってどんな使い方がありますか？

画面をリロードしないで、バックエンドのデータを取得したいときによく使うかな。

なんか難しそう・・・。

大丈夫。そんなに難しくないよ。

今回はAjaxとPHPを組み合わせて、バックエンドデータを取得する方法を解説するよ。

お願いします！

前提知識：JavaScriptとPHPの特徴比較
Ajaxの使い方
まとめ

前提知識：JavaScriptとPHPの特徴比較

ウェブページをリロードせずに、任意のタイミングでサーバ上のデータを取得する際には、JS(Ajax)とPHPを組み合わせる必要があります。

そのことを理解するために、まずはJavaScript・PHPそれぞれの特徴を比較します。

JavaScript

・ブラウザ上で動く（リロード不要）
・サーバとのやりとりはできない

PHP

・サーバ上で動く
・リロードしないと動かない

まとめると、JavaScriptはサーバとのやりとりはできませんが、ページをリロードしなくても動かすことができます。

それに対して、PHPはサーバ上のデータ（DB情報等）を取得できますが、ページをリロードしないと起動しません。

つまり、任意のタイミングでリロードせずにPHPを動かすためにJavaScript(Ajax)が必要なのです。

JavaScriptとPHPの違いの詳細については、こちらのページをご参照ください。

Ajaxの使い方

Ajaxを使うケースの具体例を解説していきます。

下の例のようにセレクトボックスの切り替えによって、表示を一部変えたいケースを考えてみましょう。

①「動物」選択時

②「果物」選択時

これをHTML・JS（Ajax）・PHPの組み合わせで実装します。

なお、今回は簡略化のためにDBを利用していませんが、実際の業務ではDBからデータを取得することになるケースが多いでしょう

HTMLのコード

<!-- index.html -->
<html>
<head>
  <!-- jqueryを読み込み -->
  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  <!-- jsファイルを読み込み -->
  <script src="main.js"></script>
  <meta charset="utf-8" />
</head>
<body>
  <!-- セレクトボックスを表示 -->
  <select name="select" id="select">
    <option value="unselected">未選択</option>
    <option value="animals">動物</option>
    <option value="fruits">果物</option>
  </select>
  <!-- セレクトボックス変更時にここに結果を表示する -->
  <div id="displayArea">
  </div>
</body>
</html>

JS（jQuery）のコード

selectタグの選択を切り替えた際に、Ajaxを使ってPost通信でサーバ(PHP)にアクセスします。

//main.js
//メニュー選択時に起動。
$(document).on('change', '#select', function () {
　//ajax起動。post通信でselectのvalueを指定のurlに送る。
   $.ajax({
        type: "POST",
        data: $('#select').val(),
        url: "getData.php",
　　//通信が成功したら表示切り替え。
      }).done(function (response) {
         //id:displayAreaにバックエンドから返ってきたデータを表示。
         $('#displayArea').append(respnse[0])
　　//通信が失敗したらエラー表示。
      }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
        console.log(XMLHttpRequest);
        console.log(textStatus);
        console.log(errorThrown);
        return;
      })
  });

PHPのコード

PHPではAjaxでアクセスされた際に、受け取った値を参考に、表示するデータを返します。

先述した通り、実際に現場で利用する際はDBにアクセスしてデータ取得するケースが多いです。

今回は簡略化のために、単純にif文で条件分岐して配列を返しています。

//getData.php
<?php
header("Content-type: application/json; charset=UTF-8");

//jsに返すデータ。今回は簡略化のためにDBから取得はせず、単に配列を用いる。
$animals = ["cat","dog"];
$fruits = ["apple","orange"];

//AjaxでPost送信された値を受け取る
$data = $_POST['data'];

//jsに返すデータを後ほどここに格納する。
$return_data = [];

//Ajaxで受け取ったデータに応じて、$return_dataを書き換え。
if($data=="animals"){
  $return_data = $animals;
}else if($data=="fruits"){
  $return_data = $fruits;
}

//$return_dataをjson形式で返す。
echo json_encode($return_data);

//処理終了
exit;
?>