Bootstrap Modal表单无法向Spring Boot Controller传递数据问题

1. 检查前端表单核心配置 #

确保你的Modal表单满足以下要求：

• 表单method设为post，action指向Controller的正确接口路径，示例：

  <form id="addEntityForm" method="post" action="/api/entities/save">
  

• 所有输入框的name属性必须和后端实体类的字段名完全匹配（包括大小写，Spring默认按驼峰规则绑定），比如实体类有productName字段，输入框需写：

  <input type="text" class="form-control" name="productName" placeholder="输入产品名称">
  

• 若用AJAX提交，需正确序列化表单数据，同时阻止默认提交行为，示例：

  $('#submitBtn').click(function(e) {
      e.preventDefault();
      $.ajax({
          url: '/api/entities/save',
          type: 'POST',
          data: $('#addEntityForm').serialize(),
          success: function(res) {
              $('#entityModal').modal('hide');
              // 其他成功逻辑
          }
      });
  });
  

2. 后端Controller参数绑定校验 #

• 用@ModelAttribute注解绑定实体类，或直接接收实体对象（Spring会自动完成属性注入），示例：

  @PostMapping("/api/entities/save")
  public String saveEntity(@ModelAttribute Product product) {
      productService.save(product);
      return "redirect:/entities/list";
  }
  

• 实体类必须具备无参构造方法，且所有需要接收值的字段都有对应的getter和setter方法——Spring依赖这些方法完成属性赋值。
• 若需单独接收参数，可使用@RequestParam注解，示例：

  @PostMapping("/api/entities/save")
  public String saveEntity(@RequestParam("productName") String name, @RequestParam("price") BigDecimal price) {
      Product product = new Product();
      product.setProductName(name);
      product.setPrice(price);
      productService.save(product);
      return "redirect:/entities/list";
  }
  

3. 关键排查步骤 #

• 打开浏览器开发者工具的Network标签，查看提交请求的Form Data，确认表单数据是否已被正确发送。
• 检查浏览器控制台是否有JS报错（如选择器错误、AJAX请求失败）。
• 若实体类字段与数据库列名不一致，可通过@Column(name = "db_column_name")注解映射，但前端name仍需与实体类字段名保持一致。

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