当前位置：首页 > 文章列表 > 文章 > java教程 > Ajax提交表单数据与SpringBoot对接教程

Ajax提交表单数据与SpringBoot对接教程

2025-12-02 14:36:42 0浏览收藏

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《Ajax提交表单数据与Spring Boot接口交互》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

使用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表单提交，核心步骤包括：

阻止表单默认提交行为：防止浏览器执行传统的页面跳转或刷新。
收集表单数据：将用户输入的数据从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>&lt;input type=&quot;text&quot; id=&quot;revision&quot; name=&quot;revision&quot;/&gt;</td> <!-- 添加 name 属性 -->
            </tr>
            <tr>
                <td>Project Name :</td>
                <td>&lt;input type=&quot;text&quot; id=&quot;projectName&quot; name=&quot;projectName&quot;/&gt;</td> <!-- 添加 name 属性 -->
            </tr>
            <tr>
                <td>Product Description :</td>
                <td>&lt;input type=&quot;text&quot; id=&quot;prodDesc&quot; name=&quot;prodDesc&quot;/&gt;</td> <!-- 添加 name 属性 -->
            </tr>
            <tr>
                <td>Product Code :</td>
                <td>&lt;input type=&quot;text&quot; id=&quot;prodCode&quot; name=&quot;prodCode&quot;/&gt;</td> <!-- 添加 name 属性 -->
            </tr>
            <tr>
                <td>Packing :</td>
                <td>&lt;input type=&quot;text&quot; id=&quot;packing&quot; name=&quot;packing&quot;/&gt;</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;

本篇关于《Ajax提交表单数据与SpringBoot对接教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

Pyodide集成BasthonTurtle教程与SVG渲染详解

上一篇: Pyodide集成BasthonTurtle教程与SVG渲染详解

下一篇: CSS固定表格列宽，table-layout属性使用技巧

查看更多