プログラミング逆引き辞典

~ 多言語対応のプログラミングレシピ ~

Ajax通信

■JQueryを利用したAjax通信について解説する
例として「名前」と「年齢」の入力値をクライアント側にその内容を表示させてみる
 
前提条件:PHPを使用する為、サーバーに接続できる状態であること
 
 
下記例ではローカル開発環境でビルトインサーバーを起動している
・ローカル開発環境構築方法→ローカル開発環境構築(Windows)
・ビルトインサーバー起動方法→ビルトインサーバー起動
 
 
【クライアント側】


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Ajaxの学習</title>
  </head>
  <body>
    <div>
      <form action="" method="post">
        <p>名前:<input type="text" name="name" id="name"></p>
        <p>年齢:<input type="age" name="age" id="age"></p>
      </from>
    </div>
    <div>
      <button type="button" id="ajax">Ajax</button>
    </div>
    <div class="result">
      <!-- Ajax通信の結果 -->
    </div>
    <div class="final">
      <!-- Ajax通信の結果(always) -->
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
      $(function(){
        //Ajaxボタンを押下時のイベント
        $('#ajax').on('click', function(){
          //Ajax通信の記述
          $.ajax({
            url: 'test.php',
            type: 'POST',
            timeout: 5000,
            data: {
              'name': $('#name').val(),
              'age': $('#age').val()
            }
          })
          // Ajax通信が成功した場合
          .done(function(data) {
            $('.result').html(data);
          })
          // Ajax通信が失敗した場合
          .fail(function() {
            alert('ERROR');
          })
          // Ajax通信が成功・失敗に関わらず処理
          .always(function() {
            $('.final').text("終了");
          })
        });
      });
    </script>
  </body>
</html>

 
【サーバー側】


<?php
  // isset関数でNULLチェック
  if(isset($_POST['name']) && isset($_POST['age'])) {
    //テキストボックスが未入力かどうかをチェック
    if ($_POST['name'] != "" && $_POST['age'] != "") {
      $name = $_POST['name'];
      $age = $_POST['age'];
      $str = "名前:" .$name . "\n" . "年齢:" .$age;
      // nl2br — 改行文字の前に HTML の改行タグを挿入する
      $result = nl2br($str);
      echo $result;
    } else {
      //テキストボックスのどちらかが未入力の場合
      $name = $_POST['name'];
      $age = $_POST['age'];

      if ($name == "") {
        //名前と年齢の両方が入力されていない場合に備えて改行処理
        echo nl2br("名前が入力されていません" . "\n");
      }
      if ($age == "") {
        echo "年齢が入力されていません";
      }
    }
  } else {
    //テキストボックスがNULLの場合
    echo "ERROR";
  }

 
【Ajax通信の結果】
・両方入力されていた場合

 
・片方しか入力されていない場合

 
・両方入力されていない場合