jQueryのAjaxをPHPで使うやつ #JavaScript

渡しっ放しじゃないしっかり返ってくるやり方

データベースは
テーブル名：members
カラム
int(10) :member_id
varchar(50) :member_name
です。

member_idで検索して、member_idとmember_nameを表示します。
目的が検索ならリアルタイムにしたいところですが
今回はindex.htmlからsend.phpに何かを送って
send.phpがindex.htmlに結果なりエラーなりを
返すといったところが目的です。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQueryのAjaxをPHPで使うやつ</title>
</head>
<body>

  <h1>jQueryのAjaxをPHPで使うやつ</h1>
  <form method="post">
    <p><input id="request" size="10" maxlength="10"></p>
    <p><input id="send" value="送信" type="submit"></p>
  </form>

  <div id="XMLHttpRequest"></div><!-- ステータスコード -->
  <div id="textStatus"></div><!-- エラー情報 -->
  <div id="errorThrown"></div><!-- 例外情報 -->

  <div id="result"></div><!-- 返してきたデータを表示 -->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {

  //送信ボタンをクリック
  $('#send').click(function(){

    //POSTメソッドで送るデータを定義する
    //var data = {パラメータ : 値};
    var data = {request : $('#request').val()};

    //Ajax通信メソッド
    //type : HTTP通信の種類(POSTとかGETとか)
    //url  : リクエスト送信先のURL
    //data : サーバに送信する値
    $.ajax({
      type: "POST",
      url: "send.php",
      data: data,
      //Ajax通信が成功した場合に呼び出されるメソッド
      success: function(data, dataType){
        //デバッグ用 アラートとコンソール
        alert(data);
        console.log(data);

        //出力する部分
        $('#result').html(data);
      },
      //Ajax通信が失敗した場合に呼び出されるメソッド
      error: function(XMLHttpRequest, textStatus, errorThrown){
        alert('Error : ' + errorThrown);
        $("#XMLHttpRequest").html("XMLHttpRequest : " + XMLHttpRequest.status);
        $("#textStatus").html("textStatus : " + textStatus);
        $("#errorThrown").html("errorThrown : " + errorThrown);
      }
    });
    return false;
  });
});

</script>
</body>
</html>

send.php

<?php

/*** データベースに接続するための宣言 ***/
$con = mysqli_connect('ホスト', 'ユーザ', 'パスワード') or die(mysqli_error());
mysqli_set_charset($con, "utf8");
mysqli_select_db($con,'データベース名');
mysqli_query($con,'SET NAMES UTF8');


function hsc($str){
  return htmlspecialchars($str, ENT_QUOTES, 'UTF-8');
}

//このページでechoしたものがhtmlに返されて出力される
header("Content-type: text/plain; charset=UTF-8");

//Ajaxによるリクエストかどうかの識別を行う
//strtolower()を付けるのは、XMLHttpRequestやxmlHttpRequestで返ってくる場合があるため
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){  

  if(isset($_POST['request'])){

    //member_id(int型)で検索するためint以外を弾く
    $request= (int)filter_input(INPUT_POST, 'request');

    $sql = sprintf("SELECT * FROM members WHERE member_id LIKE '%s'",
                   mysqli_real_escape_string($con,'%'.addcslashes(hsc($request), '\_%').'%')
    );
    $res = mysqli_query($con,$sql);
    if(mysqli_num_rows($res) != 0){
      while($row = mysqli_fetch_assoc($res)){
        $memberId   = $row['member_id'];
        $memberName = $row['member_name'];

        $String .= "<p>".$memberId."</p>";
        $String .= "<h3>".$memberName."</h3>";
      }
    }else{
      //デバッグ用 データがなかった時にSQLを出力する
      echo $sql;
    }
    echo $String;
  }else{
    echo 'The parameter of "request" is not found.';
  }

}else{
  echo 'This access is not valid.';  
}