Infinite Scroll：Ajaxと組み合わせて無限スクロール風にコンテンツ追加するJSサンプル

手順４．固定内容ではなく、DBからデータを取得する
ここまでは、Webサーバさえ用意できていれば実装できる内容でした。
しかし、これでは「AddedList!」が表示されるだけで、あまり面白くありません。
そこで最後に、作成した「loadmore.html」を、DB(MySQL)から取得した値を表示するようなプログラムに加工してみましょう。

こんなデータベーステーブルを想定します。

SQLとしては下記のようになります。
>create database sample;
>use sample;
>create table contents_tbl(id int(11),title text);
>insert into contents_tbl(id,title) values
->(30561,’jQueryUIをはじめる方は必見、超簡単サンプル集～その１～’),
->(30592,’jQueryUIをはじめる方は必見、超簡単サンプル集～その２～’),
->(30826,’jQueryUIをはじめる方は必見、超簡単サンプル集～その３～’),
->(30954,’jQueryUIをはじめる方は必見、超簡単サンプル集～その４～’),
->(30958,’jQueryUIをはじめる方は必見、超簡単サンプル集～その５～’);

「More…」をクリックすると、このテーブルの情報を一つずつ追加するように、
上記で作成したtest.html、loadmore.htmlを改修しましょう。

【test.html】

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
	$('#more').click(function(){
		$.ajax({
			url: "./loadmore.php",
			type: 'POST',
			data: {
				index: i,
			},
			success: function(data){
				if(data){
					$("#list").append(data);
					i++;
				}else{
					$("#list").append('No more posts to show.');
				}
			}
		});
	});
});
</script>
<ul id="list">
</ul>
<div id="more">More...</div>

.ajaxの処理の部分に変更を加えていますので、そのあたりをチェックしてみてください。

【loadmore.php】
※まず、loadmore.htmlではなく、loadmore.phpに拡張子を変更しておきます。

<?php
//PDOでDB接続
$dsn = 'mysql:dbname=sample;host=localhost';
$user = 'xxxx';
$password = 'xxxx';
global $pdo;
$pdo = new PDO($dsn, $user, $password);

//SQLを作成し実行
$sql = "select * from contents_tbl limit " . $_POST['index'] . ", 1";
$st = $pdo->prepare($sql);
$st->execute();
$row = $st->fetch(PDO::FETCH_ASSOC);

//結果行が取得できたらliタグに埋め込んで表示
if($row){
?>
<li><a href="https://techpjin.sakura.ne.jp/techpjin_new/archives/<?=$row['id']?>"><?=$row['title']?></a></li>
<?php
}
?>

SQLを使用して、1行分のデータを取得します。
そのとき取得するデータは、呼び出し側で１つずつ指定した順番をずらしていくようにしています(indexの部分)。
呼び出し側でAjaxの呼び出しがsuccessする度にindex「i」の値を1ずつ増加させています。

実際にブラウザで見てみましょう。

①最初の表示。「More…」だけ表示されています。

②「More…」をクリックすると、DBから取得された情報がAjaxで取得され、表示されます。

③何度もクリックすると、どんどん出てきます。

④これ以上なくなると、メッセージが表示されます。

このように、クリックイベントをトリガーにして、Ajaxでデータを取ってきて追加表示、という流れがわかってしまえば、Infinite Scrollは簡単に実装できます。今回はリスト1行分という、少しの情報でしたので、スクロールしている感じがないですが、表示コンテンツが大きいものになれば、勝手にスクロールが必要な縦幅になります。
例えば

<li style="height:300px;">