Spring Boot+Thymeleaf表单提交时如何阻止页面刷新

要实现表单提交无刷新，核心是通过异步请求替代原生表单的同步提交行为，修改如下：

前端调整 #

表单结构修正+添加异步提交逻辑 #

<!-- 表单部分：循环渲染复选框时删除固定id="myCheck"，避免重复id导致DOM选择异常
<form class="myform myform-newaccount" id="myForm"
      th:action="@{/authorList?buttonValue=pluginlist}"
      th:object="${userModifyDto}" method="post">
    <input type="checkbox" name="applicationId" th:field="*{applicationIds}"
           th:value="${option.applicationId}" /> 
    <input type="submit" value="send" id="myid"/>
</form>

异步提交逻辑可选两种实现方式：

• 方式1：jQuery实现（需确保项目已引入jQuery依赖）

// 监听表单提交事件
$("#myForm").submit(function(e) {
    // 阻止默认提交的页面刷新行为
    e.preventDefault();
    // 序列化表单所有数据，自动包含所有选中的复选框值
    let formData = $(this).serialize();
    // 发送异步POST请求
    $.post($(this).attr("action"), formData, function(res) {
        // 提交成功后的自定义逻辑，比如弹出提示、更新页面局部内容
        alert("提交成功");
    }).fail(function() {
        alert("提交失败，请重试");
    });
});

• 方式2：原生JS实现（无需引入额外依赖）

document.getElementById("myForm").addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    fetch(this.action, {
        method: 'POST',
        body: formData
    }).then(response => response.json())
    .then(res => {
        console.log('提交成功', res);
        // 自定义成功逻辑
    }).catch(err => {
        console.error('提交失败', err);
        // 自定义失败逻辑
    });
});

后端接口调整 #

原接口需要将返回值从视图改为JSON响应，添加@ResponseBody注解即可：

@PostMapping("/authorList")
@ResponseBody
public Map<String, Object> submitAuthorList(UserModifyDto userModifyDto, @RequestParam String buttonValue) {
    // 保留原有业务逻辑，完成数据入库操作
    Map<String, Object> res = new HashMap<>();
    res.put("code", 200);
    res.put("msg", "操作成功");
    return res;
}

注意事项 #

• 循环渲染复选框时可以根据业务给每个复选框设置唯一标识，不要复用重复id
• Spring Boot默认支持application/x-www-form-urlencoded类型的请求参数，原有参数接收逻辑不需要调整
• 提交成功后可以根据业务需要更新页面局部内容，无需刷新整个页面

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