jQuery.ajaxでPHPプログラムに処理要求を出す

前回の続き。トップページを.phpでなく.htmlにした。jQuery.ajaxから、データベースの情報をJSON形式で返すようPHPに要求している。jQuery.ajaxについては以前少しやった。JavaScript部はくくり出して別ファイルにした方がいいだけど。

成果物：index.html

メモ

jQuery.ajaxでPHP(latest.php)に処理要求を出している

success:で指定したコールバックの引数にPHPの処理結果(レコードの配列)が入ってる
jQuery.eachで”latest”のdiv要素にimg要素を追加している。レコードごとに処理を回せて便利。

PHP部はヘッダのタイプをapplication/jsonにして、データ(配列)をjson_encode()で変換したのを出力している
```
header('Content-Type: application/json; charset=utf-8');
echo json_encode(get_latest());
```

ソースコード
index.html

<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>スマホキャプチャーギャラリー</title>
</head>
<body>
	<a href="index.html">Home</a> | <a href="upload.html">アップロード</a> | <a href="ranking.html">人気順</a>  | <a href="latest.html">新着順</a>

	<p>トップページ：アップロード画像の一覧表示</p>
	<div id="latest"></div>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$.ajax({
				url: "latest.php",
				success: function(json_data) {
					$.each(json_data, function(index, data) {
						$('#latest').append(
							'<a href="item.php?id='+data.id+'"><img src="./images/'+data.filename+'" alt="image" width="160" /></a> '
						);
					});
				}
			});
		});
	</script>
</body>
</html>

latest.php

<?php
function get_latest() {
	require_once('config.php');

	try {
		$dbh = new PDO(DSN, DB_USER, DB_PASS);
	} catch(PDOException $e) {
		var_dump($e->getMessage());
		exit;
	}

	$sql = "select * from mobile_capture_showcase order by time desc";
	$items = array();
	foreach ($dbh->query($sql) as $item) {
		array_push($items, $item);
	}

	$dbh = null;

	return $items;
}

header('Content-Type: application/json; charset=utf-8');
echo json_encode(get_latest());
?>

参考サイト