[php+jQuery+SQL]ajaxでデータ取得・出力する

辛かった

やりたいこと
やっていく
別パターン
参考

やりたいこと

DBに情報を保存してある。

一覧ページを作って、例えば20記事分を出力してあるとする。

一覧の下に「もっと見る」的なボタンがあって、クリックすると追加で10記事が表示される。

そういうのを作りたい。

やっていく

作るのは3つ。

表示するページ
ajaxを動かすjs
ajaxで発火するphp

表示するページ

まあ多分phpで作るんだろうけど、初回表示もjsで制御するならhtmlでもいける。

簡単にこんな感じ。

ここに入れる
<ul id="content">
<li>初期表示記事</li>
<li>初期表示記事</li>
<li>初期表示記事</li>
︙
</ul>
表示されてる記事数を格納
<input type="hidden" id="count" value="">
これをクリックしたら発火
<button type="button" id="moreBtn">もっと見る</button>

.append()でやるからラッピング要素をちゃんと構えるのと、ユニークでないとアレなんでidをちゃんとつけておく。

トリガーになるbuttonはクリック時にページ遷移しないようにtype=”button”にしておく。

追加表示する記事が重複したりしないように、LIMITで「ここからここまで」を指定する必要がある。なので、今回は#countで現在表示されている記事数を格納しておく。jsで入れ込むので空欄でOK。

jQuery

$(function(){
    //ページ表示時に出力された記事数を格納
    $("#count").val($("ul.content").length);
    //クリックしたら発火
    $('button#moreBtn').on('click',function(){
        //そのままだと文字列だから書式を数値に指定
        var count = Number($("#count").val());
        //追加表示する記事数
        var addNum = 10;
        $.ajax({
            type: "post",
            datatype: "json",
            url: 'addPost.php',
            //出力用phpに送りたいデータ群
            data:{
                "count" : count,
                "addNum" : addNum,
            }
        }).then(function(data){
            //出力用phpで生成した内容をページ内に出力
            $("ul.content").append(data);
            //記事数を更新
            $("#count").val(count + addNum);
        },function(){
            console.log('error');
        })
    })
})

HTMLに出力するための整形をjQuery側で行うケースもあるけど、出力用のPHPでまとめちゃった方がいいかなって思ってこっちはシンプルにした。

使い回しが発生するならPHPは値だけを送ってjQueryで整えるのがいいんでケースバイケースか。

出力用PHP

<?php
//文字コード指定
header("Content-type: application/json; charset=UTF-8");
//jsから送られたdataを取得
$count = $_POST["count"];
$addNum = $_POST["addNum"];
//DBに接続
$pdo = new PDO('mysql:host=****;dbname=****;','****','****',[ PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC ]);
//該当テーブル（****）の指定位置（count）から指定数分（addNum）を取得
$stmt = $pdo->prepare("SELECT * FROM **** LIMIT {$count} OFFSET {$addNum}");
$stmt->execute();

//取得した内容を格納する変数
$dataList = '';
//jsに送る内容をまとめていく
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    //格納する内容用の変数初期化
    $rowset = '<li>';
    //出力したい内容を足していく
    $rowset .= '<span>'.$row['date'].'</span>';
    $rowset .= '<span>'.$row['name'].'</span>';
    ︙
    $rowset .= '</li>';

    //変数に格納
    $dataList .= $rowset;
}

//jsにデータを送る
echo json_encode($dataList);
?>

js側で構えたdataはajaxの設定通りPOSTで送られてくるので受け取り方に注意。

dataは今回みたいな取得位置関係だけでなく、昇順・降順とか、並びを指定したい場合とかにも使える。割りと活用シーンは多い。

別パターン

出力用PHPで値だけ用意してjQueryで整形する場合の。

要点だけ。

$(function(){
//略
    $('button#moreBtn').on('click',function(){
//略
        $.ajax({
//略
        }).then(function(data){
            $.each(data, function(key, value){
                $("ul.content").append('<li><span>'+value.date+'<span>'+value.name+'</span></li>');
            });
        },function(){
//略
        })
    })
})

//略
$dataList = array();
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    $dataList[] = array(
        'date' => $row['date'],
        'name' => $row['name'],
       ︙
    );
}
//略

phpで作った連想配列をjs受け取って、.each()で回して展開する。

参考

【jQuery】PHP/Ajax/MySQL を利用した非同期通信を行う - Qiita

実装内容 productsテーブルを作成する。（カラムはid, name, priceの3つ）一覧に常にレコード全件が表示される特定のidからnameとpriceを取り出して表示する新しくレコードを追加して、一覧に追記す...

他にもにたのはあったけど、この記事が一番良かった。