將資料用 json 格式存在前端後再取用的方法- 使用 php 與 jQuery

做前後端整合的時候都應該盡量避免太過頻繁的存取資料庫的資料，這邊來講一下把資料庫讀出來的資料存在前端的 json 後再去讀取的方法：

首先看一下我們的資料長這樣：

先透過讀取資料庫把所有使用者讀出來：

$stmt=$db_host->prepare("SELECT * FROM users");
try{
    $stmt->execute();
    $rows=$stmt->fetchAll(PDO::FETCH_ASSOC);
}catch(PDOExecption $e){
    echo "讀取資料失敗";
}

接著把資料轉成 json 後存到 javascript：

<script>
let users=<?=json_encode($rows)?>;
console.log(users)
</script>

同時也把每個使用者用 php 顯示出來，並把 id 資訊藏在元素裡：

<?php foreach($rows as $value){ ?>
            <button type="button" class="btn btn-primary" data-id=<?=$value["id"]?>><?=$value["name"]?></button>
<?php } ?>

接著點擊按鈕後，透過過濾 json 的方式去拿到你要的資料就好了。

$(".btn").click(function(){
            let id=$(this).data("id")
            let user=users.find((user)=>{
                return user.id==id;
            })
            console.log(user)
        })