springboot 表格添加成功弹窗显示代码

在Spring Boot项目中，结合前端技术（如Thymeleaf或Vue.js），当你在后端API完成表格数据新增操作后，通常会希望在前端页面上显示一条成功或错误的提示消息。这里以Thymeleaf为例说明：

首先，在后端（通常是Controller）完成数据库操作并设置响应体：

@PostMapping("/save")
public ResponseEntity<String> saveTable(@RequestBody YourModel model) {
    try {
        yourService.save(model);
        return ResponseEntity.ok("表单保存成功");
    } catch (Exception e) {
        return ResponseEntity.status(HttpStatus.BAD_REQUEST).body("保存失败，请检查填写的信息");
    }
}

然后，在前端HTML模板文件中，利用AJAX监听表单提交事件，并处理返回结果：

<form th:action="@{/save}" method="post" id="addForm">
    <!-- ... 表单内容 -->
</form>

<script>
$(document).ready(function () {
    $('#addForm').submit(function (event) {
        event.preventDefault(); // 阻止默认表单提交行为

        $.ajax({
            url: '/save',
            type: 'POST',
            data: $(this).serialize(), // 将表单数据序列化
            dataType: 'json',
            success: function(response) {
                if (response.status === "success") {
                    swal("成功", response.message, "success"); // 使用SweetAlert插件显示提示
                } else {
                    swal("失败", response.message, "error");
                }
            },
            error: function(xhr, status, error) {
                swal("错误", "保存失败，请稍后再试", "error");
            }
        });
    });
});
</script>

<!-- 引入SweetAlert插件 -->
<script src="path/to/sweetalert.min.js"></script>
<link rel="stylesheet" href="path/to/sweetalert.css">

这段代码会阻止表单的默认提交，发送POST请求到后端，根据返回的状态和消息展示SweetAlert插件的提示。