使用Ajax和Spring Boot REST API提交HTML表单数据

本教程详细阐述了如何通过jquery ajax将html表单数据异步提交至java spring boot rest api。内容涵盖html表单的正确配置、javascript中阻止默认提交及数据序列化为json的方法，以及spring boot控制器如何使用`@requestbody`注解接收和映射json数据，确保前后端数据交互的顺畅与高效。

在现代Web应用开发中，实现无刷新页面更新和异步数据交互是提升用户体验的关键。Ajax（Asynchronous JavaScript and XML）技术允许客户端在不重新加载整个页面的情况下与服务器交换数据。本教程将指导您如何结合jQuery Ajax和Java Spring Boot REST API，高效地提交HTML表单数据。

1. 理解Ajax表单提交原理

传统的HTML表单提交会触发页面刷新，导致用户体验中断。Ajax提交则通过JavaScript在后台发送HTTP请求，接收服务器响应后，再通过JavaScript动态更新页面，从而实现无缝的用户体验。

要实现Ajax表单提交，核心步骤包括：

1. 阻止表单默认提交行为：防止浏览器执行传统的页面跳转或刷新。
2. 收集表单数据：将用户输入的数据从HTML表单中提取出来。
3. 序列化数据：将收集到的数据格式化为适合发送给服务器的格式（例如JSON或URL编码字符串）。
4. 发送Ajax请求：使用XMLHttpRequest对象（或jQuery等库的封装）发送HTTP请求。
5. 处理服务器响应：根据服务器返回的数据更新页面或提供用户反馈。

2. HTML表单准备

为了使Ajax能够正确收集表单数据并将其映射到后端Java对象，HTML表单需要进行以下关键配置：

• 为输入字段添加 name 属性：这是至关重要的。jQuery的serializeArray()方法依赖于name属性来识别表单字段及其值。这些name属性将直接对应后端Java模型（POJO）的字段名。
• 移除 form 标签的 method 和 onsubmit 属性：由于我们将通过JavaScript来处理提交，这些属性可能会与Ajax行为冲突，导致重复提交或意外的页面刷新。
• 引入 jQuery 库：jQuery极大地简化了Ajax操作。

以下是修改后的HTML表单示例：

    
    
    
    
    
    
    


    
 
        

            

                
Revision :
                
 
            
            

                
Project Name :
                
 
            
            

                
Product Description :
                
 
            
            

                
Product Code :
                
 
            
            

                
Packing :
                
 
            
        
        

        Generate Datasheet
    

3. JavaScript (jQuery Ajax) 配置

在JavaScript中，我们将使用jQuery来监听表单提交事件，阻止默认行为，并将表单数据序列化为JSON格式发送给后端。

关键点说明：

• $(document).ready(function() { ... });：确保在DOM加载完成后再绑定事件，避免找不到#myForm元素。
• e.preventDefault();：这一行至关重要，它阻止了浏览器执行表单的默认提交行为（通常是页面刷新）。
• $(this).serializeArray();：jQuery方法，将表单数据序列化为一组JavaScript对象数组，每个对象包含name和value属性。
• 将formDataArray转换为formData对象：通过遍历serializeArray()的结果，我们构建了一个扁平的JavaScript对象，其键值对与HTML输入字段的name属性及其值相对应。
• JSON.stringify(formData);：将JavaScript对象formData转换为JSON格式的字符串。这是后端Spring Boot控制器期望接收的格式。
• url: "http://localhost:8080/submit"：确保这里的URL与您的Spring Boot控制器中@PostMapping注解的路径完全匹配。
• contentType: "application/json"：HTTP请求头，告知服务器请求体是JSON格式。
• dataType: "json"：指定您期望从服务器接收到的响应数据类型。如果服务器返回JSON，设置此项有助于jQuery正确解析响应。

4. Java Spring Boot REST API接收

在后端，Spring Boot控制器需要配置为接收JSON格式的POST请求，并将其映射到Java对象。

4.1 模型（Model）类

首先，定义一个Java POJO（Plain Old Java Object）类，其字段名应与HTML表单输入字段的name属性（以及前端发送的JSON对象的键）一致。这个类将用于承载从前端接收到的数据。

// Project.java
public class Project {

    private String revision;
    private String projectName;
    private String prodDesc;
    private String prodCode;
    private String packing;

    // 必须提供所有字段的公共 Getter 和 Setter 方法，
    // Spring Boot的Jackson库会使用它们进行JSON到Java对象的映射。

    public String getRevision() {
        return revision;
    }
    public void setRevision(String revision) {
        this.revision = revision;
    }

    public String getProjectName() {
        return projectName;
    }
    public void setProjectName(String projectName) {
        this.projectName = projectName;
    }

    public String getProdDesc() {
        return prodDesc;
    }
    public void setProdDesc(String prodDesc) {
        this.prodDesc = prodDesc;
    }

    public String getProdCode() {
        return prodCode;
    }
    public void setProdCode(String prodCode) {
        this.prodCode = prodCode;
    }

    public String getPacking() {
        return packing;
    }
    public void setPacking(String packing) {
        this.packing = packing;
    }
}

4.2 控制器（Controller）类

接下来，创建或修改您的Spring Boot控制器，以处理来自前端的POST请求。

// DataSheetGenController.java
import org.springframework.http.MediaType;