本教程详细阐述了如何通过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表单数据。
传统的HTML表单提交会触发页面刷新，导致用户体验中断。Ajax提交则通过JavaScript在后台发送HTTP请求，接收服务器响应后，再通过JavaScript动态更新页面，从而实现无缝的用户体验。
要实现Ajax表单提交，核心步骤包括：
为了使Ajax能够正确收集表单数据并将其映射到后端Java对象，HTML表单需要进行以下关键配置：
立即学习“前端免费学习笔记（深入）”；
以下是修改后的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>在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>关键点说明：
在后端，Spring Boot控制器需要配置为接收JSON格式的POST请求，并将其映射到Java对象。
首先，定义一个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;
}
}接下来，创建或修改您的Spring Boot控制器，以处理来自前端的POST请求。
// DataSheetGenController.java import org.springframework.http.MediaType;
以上就是使用Ajax和Spring Boot REST API提交HTML表单数据的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
930
收藏
