Webエンジニア 新人日記

Webエンジニアになりました。元々はCOBOLやらBASICやらでプログラムしてました。C言語やVisualBasicは趣味でやっていましたが、久々に現場復帰ということです。資格はエンベデッドスペシャリスト、DBスペシャリスト、ネットワークスペシャリスト、セキュリティスペシャリスト、システムアーキテクト、プロジェクトマネージャ他を所有

【Javascript + PHP】AjaxでDBのデータをJSONで受け取る

JavascriptでDBにアクセスする場合、AjaxPHP側にパラーメータを投げてデータを受け取るのが一般的。
データの受取はJSONにするのがスマート。

Javascriptの場合、PHP側を呼び出すためにはPOSTが良いのでは。

//POSTメソッドで送るデータを定義する
//var data = {パラメータ : 値};
var data = {
	request : $('#bus').val(), 
	init : initflg, 
	};
//Ajax通信メソッド
//type : HTTP通信の種類(POSTとかGETとか)
//url  : リクエスト送信先のURL
//data : サーバに送信する値
$.ajax({
  type: "POST",
  url: "bus.php",
  data: data,
  dataType: "json",
  //Ajax通信が成功した場合に呼び出されるメソッド
  success: function(json){
    console.log(json);
//成功した場合はjson構造体の配列に格納される

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

この場合、json[0].メンバ名~json[json.length-1].メンバ名までの配列に格納されている。


PHP側では、PDOでDBにアクセスしよう。

$sql .= "SELECT `a`, `b`, `c` FROM `tbl` WHERE `key` = ?";
$stmt = $dbh->prepare($sql);
$stmt->execute(array($bus));
header('Content-type: application/json');
echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));

SELECTで指定した項目をキーとして、fetchAllで全件データを取得と同時に
JSONエンコードする。header指定することでJavascript側にJSONで返すことができる。
{}や[]を使った整形を気にしなくて良いので楽といえば楽。