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

javascript

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ファイルの作成

sample.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’]という連想配列で入力された値を受け取ることができます。

dbconnect.php

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

今回はID番号をpostして、そのデータをもとにデータベースからnameとmailの文字列を取得、表示する処理をおこなうことにします。

WHERE句にpostされた値を挿入、データベースのidに該当のidがあればそのidの行に入っているデータを拾ってきます。

データを拾う際にwhile文で繰り返し処理をしていますが、今回の場合一つしか選択されないので本当は不要です。でもこの使い方を覚えていたほうが便利だと思います。

実際に動作させてみる

数字を入力してボタンを押すとちゃんとデータベース内のデータと一致した情報が表示されます。
1を入力してボタンを押したら佐藤晴之さんのデータが表示されました。

datatypeはjsonだといろいろ覚えることがあり面倒なのですが、調べるとjsonでやり取りする方法が結構取り上げられているので推奨されているのだと思います。
たぶん、jsonだとPHPを書き換えずともフロントエンドだけで出力の仕方を変更できるあたり便利なのでしょう。

僕は複数人でとりかかるようなプログラムを組んだことがないのでわかりませんが。

おまけ

ついでにdbconnect.phpがどんな感じになっているかも確認したいと思います。

$id = $_POST['id'];

これをコメントアウトして追加します。

//$id = $_POST['id'];
$id = 4;

これでpost情報が送信されてなくてもjsonで吐き出されるコードが表示できるのでアクセスしてみます。


idが4番の城島稜花さんの情報がjson形式で表示されています。
ajaxを通せば、送信された値によってこのjsonの中身が動的に変化するというわけです。

コメント