本教程详细阐述了如何通过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表单示例：
<!DOCTYPE html>
<html>
<head>
<title>Datasheet Generation</title>
<link rel="stylesheet" href="css_for_index.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<!-- 引入 jQuery CDN，确保在您的脚本之前加载 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<form id="myForm"> <!-- 移除 method="post" 和 onsubmit="callvalue()" -->
<table class="table">
<tr>
<td>Revision :</td>
<td><input type="text" id="revision" name="revision"/></td> <!-- 添加 name 属性 -->
</tr>
<tr>
<td>Project Name :</td>
<td><input type="text" id="projectName" name="projectName"/></td> <!-- 添加 name 属性 -->
</tr>
<tr>
<td>Product Description :</td>
<td><input type="text" id="prodDesc" name="prodDesc"/></td> <!-- 添加 name 属性 -->
</tr>
<tr>
<td>Product Code :</td>
<td><input type="text" id="prodCode" name="prodCode"/></td> <!-- 添加 name 属性 -->
</tr>
<tr>
<td>Packing :</td>
<td><input type="text" id="packing" name="packing"/></td> <!-- 添加 name 属性 -->
</tr>
</table>
<br>
<button class="Gen_Button" type="submit">Generate Datasheet</button>
</form>
</body>
</html>3. JavaScript (jQuery Ajax) 配置
在JavaScript中，我们将使用jQuery来监听表单提交事件，阻止默认行为，并将表单数据序列化为JSON格式发送给后端。
<script type="text/javascript">
// 确保DOM加载完成后再绑定事件
$(document).ready(function() {
$('#myForm').on('submit', function(e) {
e.preventDefault(); // 阻止表单的默认提交行为
// 1. 收集表单数据并转换为JSON对象
var formDataArray = $(this).serializeArray();
var formData = {};
$.each(formDataArray, function() {
// 处理同名输入框（如复选框）的情况，将其值存储为数组
if (formData[this.name]) {
if (!formData[this.name].push) {
formData[this.name] = [formData[this.name]];
}
formData[this.name].push(this.value || '');
} else {
formData[this.name] = this.value || '';
}
});
// 2. 发送Ajax POST请求
$.ajax({
type: "POST", // HTTP方法为POST
url: "http://localhost:8080/submit", // 后端Spring Boot REST API的URL
data: JSON.stringify(formData), // 将JavaScript对象转换为JSON字符串作为请求体
contentType: "application/json", // 明确告知服务器发送的是JSON数据
dataType: "json", // 期望服务器返回的数据类型（可选，根据后端实际返回类型设置）
success: function(response) {
// 请求成功时的回调函数
console.log("表单提交成功！", response);
alert('表单已成功提交！');
// 您可以在此处根据后端响应更新UI
},
error: function(xhr, status, error) {
// 请求失败时的回调函数
console.error("表单提交失败！", xhr.responseText);
alert('表单提交失败！请查看控制台获取详情。');
// 您可以在此处处理错误信息
}
});
});
});
</script>关键点说明：
- $(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;
