Thymeleaf+Spring Boot中勾选复选框无刷新提交数据到数据库如何实现

以下是两种常用的落地实现方案：

方案1：原生JavaScript + Fetch API 实现（无额外依赖） #

不需要引入任何第三方前端库，纯原生代码实现：

• 第一步：给Thymeleaf渲染的复选框绑定业务属性，方便JS获取参数

<!-- 示例代码，根据你的业务调整参数 -->
<input type="checkbox" 
       th:id="'check-'${businessId}" 
       th:data-id="${businessId}"
       th:name="${fieldName}"
       th:checked="${dbStatus == 1}">

• 第二步：编写change事件监听逻辑，触发时异步提交数据到后端

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  // 选中所有需要监听的复选框
  const checkboxes = document.querySelectorAll('input[type="checkbox"][data-id]');
  checkboxes.forEach(check => {
    check.addEventListener('change', function() {
      // 禁止重复提交
      this.disabled = true;
      const reqData = {
        id: this.dataset.id,
        checked: this.checked
      };

      fetch('/your/api/path', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
          // 若项目开启CSRF校验，添加以下请求头
          // 'X-XSRF-TOKEN': document.querySelector('meta[name="_csrf"]').content
        },
        body: JSON.stringify(reqData)
      })
      .then(res => res.json())
      .then(res => {
        // 此处根据你的后端响应结构调整判断逻辑
        if(res.success) {
          console.log('数据更新成功');
        } else {
          // 更新失败回滚复选框状态
          this.checked = !this.checked;
          alert('更新失败，请重试');
        }
      })
      .catch(err => {
        this.checked = !this.checked;
        console.error('请求异常', err);
      })
      .finally(() => {
        // 恢复复选框可点击状态
        this.disabled = false;
      })
    })
  })
})

• 第三步：后端编写普通JSON接口接收参数，完成数据库更新后返回响应即可，不需要返回视图。

方案2：htmx 轻量方案（几乎不需要手写JS） #

适合不想写大量前端交互代码的场景，htmx是专门用于无刷新交互的轻量前端工具：

• 页面引入htmx库
• 直接给复选框添加htmx属性即可完成绑定：

<input type="checkbox"
       th:checked="${dbStatus == 1}"
       hx-post="/your/api/path"
       hx-vals="js:{id: ${businessId}, checked: event.target.checked}"
       hx-swap="none">

• hx-swap="none"配置表示请求完成后不需要替换页面内容，仅提交数据即可，后端接口写法和方案1完全一致。

通用注意事项 #

• 后端接口必须做参数合法性、权限校验，避免恶意请求修改数据
• 开启CSRF校验的项目，需要在请求头中携带CSRF令牌，SpringBoot+Thymeleaf环境可在页面头部添加<meta th:name="_csrf" th:content="${_csrf.token}"/>获取令牌
• 高并发场景建议添加请求防抖逻辑，避免短时间内多次勾选触发重复提交

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