講一下利用 jQuery 透過 json 資料更新輸入欄位的做法。
這裡不是用 API 的方式,我直接從資料庫透過 PHP 把資料撈出來:
$stmt=$db_host->prepare("SELECT * FROM users"); try{ $stmt->execute(); $rows=$stmt->fetchAll(PDO::FETCH_ASSOC); }catch(PDOExecption $e){ echo "讀取資料失敗"; }
接著把資料存到 json:
let users=<?=json_encode($rows)?>;
然後建立 UI 如下:
<div>
<div class="form-group">
<select class="form-control" name="" id="users">
<?php foreach($rows as $value){ ?>
<option value="<?=$value["id"]?>"><?=$value["name"]?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label for="">name</label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="">email</label>
<input type="email" class="form-control" id="email">
</div>
</div>
接著就透過選取的值是哪個,再去篩選出 json 的內容後更新輸入欄位就好了:
$("#users").change(function(){ let id=$(this).val(); let user=users.find((user)=>{ return user.id===id; }) $("#name").val(user.name); $("#email").val(user.email); })