Ajaxを使ってデータベースのデータを非同期で取得する【Ajax+MySQL+PHP】

2018.09.07

2020.06.02

AjaxからPHPを通してMySQLデータベースのデータを非同期的に取得する方法です。今回は「member」テーブルを「test」という名前のデータベースに作成し、動作を確認します。

テーブルの作成


CREATE TABLE member (
id int AUTO_INCREMENT NOT NULL PRIMARY KEY,
name varchar(30),
mail varchar(30)
)
DEFAULT CHARSET=utf8;

INSERT INTO member (name, mail)
VALUES ("佐藤晴之","h_sato@example.com"), ("小林次郎","j_kobayashi@example.com"), ("須藤昴","s_sudo@example.com"), ("城島稜花","r_kijima@example.com"), ("徳永千春","c_tokunaga@example.com");

このSQL文を実行すると画像のようなテーブルが作成されます。

PHPファイルの作成

入力フォームのあるファイル


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ajax、PHP、MySQLの連携</title>
<link rel="stylesheet" href="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>

IDを入力:<input id="id_number" type="number"><br>

<div id="result">
 <p>数値を入力してボタンを押してください。</p>
</div>
<button id="ajax">ボタン</button>

<script>
$(function(){

 $('#ajax').on('click',function(){

  $.ajax({
   url:'./dbconnect.php', //送信先
   type:'POST', //送信方法
   datatype: 'json', //受け取りデータの種類
   data:{
    'id' : $('#id_number').val()
   }
   })
   // Ajax通信が成功した時
   .done( function(data) {
   $('#result').html("<p>ID番号"+data[0].id+"は「"+data[0].name+"」さんです。<br>メールアドレスは「"+data[0].mail+"」です。</p>");
   console.log('通信成功');
   console.log(data);
   })
   // Ajax通信が失敗した時
   .fail( function(data) {
   $('#result').html(data);
   console.log('通信失敗');
   console.log(data);
   })
 }); //#ajax click end

}); //END
</script>

</body>
</html>

id_numberというidに振られたテキストボックスに入力された値を、dbconnect.phpに対してidという名前でpostします。

すると受け取る側のphp(dbconnect.php)では、$_POST[‘id’]という連想配列で入力された値を受け取ることができます。

データベース接続のためのファイル


<?php
$id = $_POST['id'];

// データベース接続

$host = 'localhost';
$dbname = 'test';
$dbuser = 'root';
$dbpass = 'password';

try {
$dbh = new PDO("mysql:host={$host};dbname={$dbname};charset=utf8mb4", $dbuser,$dbpass, array(PDO::ATTR_EMULATE_PREPARES => false));
} catch (PDOException $e) {
 var_dump($e->getMessage());
 exit;
}
// データ取得
$sql = "SELECT id, name, mail FROM member WHERE id = ?";
$stmt = ($dbh->prepare($sql));
$stmt->execute(array($id));

//あらかじめ配列を生成しておき、while文で回します。
$memberList = array();
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
 $memberList[]=array(
  'id' =>$row['id'],
  'name'=>$row['name'],
  'mail'=>$row['mail']
 );
}

//jsonとして出力
header('Content-type: application/json');
echo json_encode($memberList,JSON_UNESCAPED_UNICODE);