如何在Spring整合的HTML页面中展示错误提示信息？

同步表单提交（Thymeleaf模板场景） #

方式1：重定向携带错误信息 #

修改控制器逻辑，把错误信息存入RedirectAttributes后重定向回表单页：

@PostMapping("/products")
public String addProduct(@ModelAttribute Product product, RedirectAttributes redirectAttributes) {
    Optional<Product> checkcode = productService.findByProcode(product.getProcode());
    Optional<Product> checkname = productService.findByProname(product.getProname());
    
    if(checkcode.isPresent() || checkname.isPresent()){
        redirectAttributes.addFlashAttribute("errorMsg", "Product already exists!");
        return "redirect:/products/new";
    } else {
        productService.save(product);
        redirectAttributes.addFlashAttribute("successMsg", "New Product submission!");
        return "redirect:/products";
    }
}

方式2：全局捕获异常 #

如果想保留原有抛出ResponseStatusException的逻辑，添加全局异常处理器：

@ControllerAdvice
public class GlobalExceptionHandler {
    @ExceptionHandler(ResponseStatusException.class)
    public String handleBadRequest(ResponseStatusException ex, RedirectAttributes redirectAttributes) {
        redirectAttributes.addFlashAttribute("errorMsg", ex.getReason());
        return "redirect:/products/new";
    }
}

HTML页面渲染错误 #

在表单页面添加错误展示区域：

<!-- 错误提示 -->
<div th:if="${errorMsg}" class="alert alert-danger">
    <span th:text="${errorMsg}"></span>
</div>

<!-- 表单 -->
<form th:action="@{/products}" th:object="${product}" method="post">
    <!-- 表单字段 -->
    <button type="submit">提交</button>
</form>

异步AJAX提交场景 #

控制器返回JSON响应 #

修改控制器返回ResponseEntity，直接返回错误文本：

@PostMapping("/products")
public ResponseEntity<String> addProduct(@RequestBody Product product) {
    Optional<Product> checkcode = productService.findByProcode(product.getProcode());
    Optional<Product> checkname = productService.findByProname(product.getProname());
    
    if(checkcode.isPresent() || checkname.isPresent()){
        return ResponseEntity.badRequest().body("Product already exists!");
    } else {
        productService.save(product);
        return ResponseEntity.ok("New Product submission!");
    }
}

前端JS处理并展示错误 #

<div id="errorBox" class="alert alert-danger" style="display: none;"></div>

<form id="productForm">
    <!-- 表单字段 -->
    <button type="submit">提交</button>
</form>

<script>
    document.getElementById('productForm').addEventListener('submit', e => {
        e.preventDefault();
        const formData = new FormData(this);
        
        fetch('/products', {
            method: 'POST',
            body: formData
        })
        .then(res => {
            if (!res.ok) return res.text().then(err => { throw new Error(err); });
            return res.text();
        })
        .then(msg => console.log(msg))
        .catch(err => {
            const errorBox = document.getElementById('errorBox');
            errorBox.textContent = err.message;
            errorBox.style.display = 'block';
        });
    });
</script>

注意点 #

• addFlashAttribute用于跨重定向传递数据，数据存在会话中，页面渲染后自动销毁，避免URL带参数。
• 全局异常处理器可以统一管理所有控制器的异常，减少重复代码。
• AJAX场景下要根据HTTP状态码判断请求是否成功，再处理错误信息。

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