Java Web 結合 jQuery Ajax 實現動態二級聯動下拉選單完整範例

技術棧

• 後端：Spring MVC（Controller + Service + Mapper）
• 前端：jQuery 3.x + 原生 select
• 數據格式：JSON

後端 Controller

@RestController
@RequestMapping("/ajax")
public class AjaxController {

    @Autowired private ClassService classService;

    // 1. 首頁加載：返回所有班級
    @GetMapping("/index")
    public String index(Model model) {
        List> classes = classService.findAllClasses();
        model.addAttribute("list", classes);
        return "cascade"; // 對應 cascade.jsp
    }

    // 2. Ajax 端點：根據班級查學生
    @GetMapping("/students")
    @ResponseBody
    public List> getStudents(@RequestParam String className) {
        return classService.findStudentsByClass(className);
    }
}

前端 JSP (cascade.jsp)

<%@ page contentType="text/html;charset=UTF-8" %>


    
    


班級-學生二級聯動



    請選擇班級
    
        ${cls.className}
    




    請先選擇班級

關鍵點解析

進階優化建議

• 防抖：若班級極多、用戶快速點擊，可加 _.debounce 或手動標誌位防止併發請求競態。
• 快取：前端用 Map 快取已加載班級，二次選擇無需請求。
• Loading 狀態：請求期間顯示「載入中...」，禁用下拉框，提升體驗。
• 跨域：若前後端分離部署，需配置 Spring MVC @CrossOrigin 或 Nginx 反向代理。

總結

「首屏渲染 + 交互 Ajax」是經典聯動下拉的最佳實踐：兼顧 SEO/首屏性能與動態交互體驗。掌握 jQuery $.ajax 參數、回調、DOM 操作流程，即可輕鬆實現多級聯動、搜索建議等豐富交互。