Ajaxを使ってPHPを動かしてHTML画面を切り替える

HTMLでセレクトボックスの選択肢を選んで、選んだ物によってその画像や文字を表示する方法です。

HTMLに、AjaxとPHPを連携させて表示させます。

Ajaxのコードは分かりやすくするためにjQueryを使っています。

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>

  <script>
  <!-- main.js -->
  </script>
</body>
</html>

Ajax　jQuery/JavaScript

HTMLの下にコードを置きます。

//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にバックエンド（PHPファイル：getData.php）から返ってきたデータを表示。
         $('#displayArea').append(respnse[0])
　　//通信が失敗したらエラー表示。
      }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
        console.log(XMLHttpRequest);
        console.log(textStatus);
        console.log(errorThrown);
        return;
      })
  });

HTML側でセレクトボックスで選択肢を選ぶと、ajaxが起動し、セレクトボックスのフォームの値が、ajaxファイルを通して、PHPファイルにポストされます。

javaScriptファイルはHTMLファイル内に置いても起動しますが、PHPファイルはHTMLファイル外に配置すると機能します。

PHPファイル

//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;
?>

MySQLと連携すると、HTMLのセレクトボックスで保存したデータを切り替えて表示することもできます。