Spring Boot从Controller向JSP传值生成下拉选单及数据展示咨询

一、当前代码存在的问题 #

1. 模型属性名称不匹配
   Controller中通过model.addAttribute("CategoryList", cate)把数据存入模型，但JSP里却用了拼写错误的${catigoryies}来取值，两者名称完全不对应，导致数据无法渲染。

2. EL表达式变量大小写不一致
   JSP里<c:forEach items="${catigoryies}" var="Category">定义的循环变量是大写开头的Category，但下面取值用的是${category.id}和${category.name}，EL表达式对大小写敏感，这会导致无法正确获取对象属性。

3. 额外细节问题
   JSP中的<label>标签没有内容，建议补充说明文本（比如<label for="Category">选择分类</label>），提升页面可用性。

二、修正后的代码示例 #

修正后的Controller代码 #

@RequestMapping(value = "/init-quiz-list", method = RequestMethod.GET)
public String getCategory(HttpSession session, ModelMap model) {
    List<Category> cate = quizService.getCategory();
    // 统一属性名称为categories，更符合命名规范
    model.addAttribute("categories", cate);
    return "init-quiz";
}

修正后的JSP代码片段 #

</div>
<div class="form-group">
    <label for="Category">选择分类</label>
    <select class="form-control"
            id="Category"
            name="Category">
        <!-- 统一属性名称和循环变量大小写 -->
        <c:forEach items="${categories}" var="category">
            <option value="${category.id}">${category.name}</option>
        </c:forEach>
    </select>
</div>

三、除ViewAndModel外，JSP展示MySQL数据的其他方式 #

• HttpSession存储
  把数据存入HttpSession，比如session.setAttribute("categories", cate)，JSP中通过${sessionScope.categories}获取。适合需要跨请求保留的数据，但要注意及时清理session中的无用数据，避免内存占用过高。

• @ModelAttribute预加载数据
  在Controller中添加带@ModelAttribute注解的方法，提前准备共用数据，所有返回该Controller下视图的请求都会自动携带这些数据：

  @ModelAttribute("categories")
  public List<Category> loadCategories() {
      return quizService.getCategory();
  }
  

  JSP中直接用${categories}即可取值，适合多个页面需要同一套数据的场景。

• AJAX异步渲染
  写一个返回JSON数据的Controller接口：

  @GetMapping("/api/categories")
  @ResponseBody
  public List<Category> getCategoriesApi() {
      return quizService.getCategory();
  }
  

  然后在JSP中用JavaScript（比如jQuery）发送请求，动态生成下拉选项：

  $(function() {
      $.get("/api/categories", function(data) {
          let select = $("#Category");
          data.forEach(category => {
              select.append(`<option value="${category.id}">${category.name}</option>`);
          });
      });
  });
  

  适合不需要刷新页面、动态加载数据的场景，体验更流畅。

内容的提问来源于stack exchange，提问作者jack