下拉框聯動多文本框：AJAX獲取數據庫數據實現馬匹性別毛色自動填充

需求場景

選擇馬匹下拉框後，性別、毛色文本框自動填充對應數據，數據來源為資料庫。

前後端交互流程

用戶選擇馬匹 → 前端監聽change事件 → AJAX發送馬匹ID → 後端查詢DB → 返回JSON → 前端填充表單

前端實現 (jQuery示例)

<select id="horseSelect">
  <option value="">請選擇馬匹</option>
  <option value="1">寶馬</option>
  <option value="2">汗血寶馬</option>
</select>
<input type="text" id="gender" readonly>
<input type="text" id="color" readonly>

<script>
$('#horseSelect').change(function() {
    var horseId = $(this).val();
    if (!horseId) { $('#gender, #color').val(''); return; }
    
    $.get('/api/horse/' + horseId, function(data) {
        $('#gender').val(data.gender);
        $('#color').val(data.color);
    }).fail(function() {
        alert('數據加載失敗');
    });
});
</script>

後端實現 (Spring MVC示例)

@GetMapping("/api/horse/{id}")
@ResponseBody
public HorseInfo getHorse(@PathVariable Long id) {
    return horseService.findById(id); // 查詢DB封裝為DTO
}

// DTO
public class HorseInfo {
    private String gender; // 雄/雌
    private String color;  // 棗紅/栗色/黑色...
    // getter/setter
}

進階優化

• 緩存： 馬匹基礎資料變動少，Redis緩存減少DB壓力
• 批量預載： 頁面加載時一次性拉取所有馬匹基礎信息，本地Map<Id, Info>秒級響應
• 防抖： 快速切換選項時取消上一請求 $.ajax({...}).abort()

參考資源

CSDN下拉框聯動詳細教程