本教程详细阐述了如何通过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表单提交，核心步骤包括：
- 阻止表单默认提交行为：防止浏览器执行传统的页面跳转或刷新。
- 收集表单数据：将用户输入的数据从HTML表单中提取出来。
- 序列化数据：将收集到的数据格式化为适合发送给服务器的格式（例如JSON或URL编码字符串）。
- 发送Ajax请求：使用XMLHttpRequest对象（或jQuery等库的封装）发送HTTP请求。
- 处理服务器响应：根据服务器返回的数据更新页面或提供用户反馈。
2. HTML表单准备
为了使Ajax能够正确收集表单数据并将其映射到后端Java对象，HTML表单需要进行以下关键配置：
立即学习“前端免费学习笔记（深入）”；
- 为输入字段添加 name 属性：这是至关重要的。jQuery的serializeArray()方法依赖于name属性来识别表单字段及其值。这些name属性将直接对应后端Java模型（POJO）的字段名。
- 移除 form 标签的 method 和 onsubmit 属性：由于我们将通过JavaScript来处理提交，这些属性可能会与Ajax行为冲突，导致重复提交或意外的页面刷新。
- 引入 jQuery 库：jQuery极大地简化了Ajax操作。
以下是修改后的HTML表单示例：
Datasheet Generation
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;
