使用Ajax向Java REST API提交HTML表单数据-java教程-PHP中文网

使用Ajax向Java REST API提交HTML表单数据

本教程详细阐述了如何通过jquery ajax将html表单数据以json格式提交至spring boot rest api。文章涵盖了html表单的构建、javascript中ajax请求的配置（包括数据转换和错误处理）、spring boot控制器中`@requestbody`注解的使用以及java数据模型的定义。通过具体代码示例，帮助开发者理解并解决常见的表单数据提交与api集成问题，确保前后端数据传输的顺畅与正确。

引言：Ajax与REST API的协同

在现代Web应用开发中，异步提交表单数据是提升用户体验的关键技术之一。通过Ajax（Asynchronous JavaScript and XML），我们可以在不重新加载整个页面的情况下，将HTML表单数据发送到后端服务器。当后端采用Spring Boot构建RESTful API时，如何高效、正确地将前端表单数据转换为后端API可识别的JSON格式，并进行处理，是开发者经常面临的问题。本教程将通过一个实际案例，详细指导您如何实现这一过程，并解决常见的集成问题。

HTML表单构建：数据准备

首先，我们需要一个HTML表单来收集用户输入。为了使JavaScript能够方便地获取表单字段值并构建JSON对象，我们为每个输入框设置了唯一的id属性。这些id将直接对应后端Java数据模型中的字段名。

请注意，为了确保jQuery能够正常工作，您需要在HTML文件的<head>部分引入jQuery库。

<!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">
    <table class="table">
        <tr>
            <td>Revision :</td>
            <td><input type="text" id="revision"/></td>
        </tr>
        <tr>
            <td>Project Name :</td>
            <td><input type="text" id="projectName"/></td>
        </tr>
        <tr>
            <td>Product Description :</td>
            <td><input type="text" id="prodDesc"/></td>
        </tr>
        <tr>
            <td>Product Code :</td>
            <td><input type="text" id="prodCode"/></td>
        </tr>
        <tr>
            <td>Packing :</td>
            <td><input type="text" id="packing"/></td>
        </tr>
    </table>
    <br>
    <button class="Gen_Button" type="submit">Generate Datasheet</button>
</form>

</body>
</html>

登录后复制

关键点：

立即学习“Java免费学习笔记（深入）”；

表单的id="myForm"用于在JavaScript中选择该表单。
输入字段的id属性（如revision, projectName等）应与Java数据模型中的字段名保持一致，以便于后续JSON对象的构建和后端映射。
移除了method="post"和onsubmit="callvalue()"，因为我们将使用jQuery来处理表单提交事件，并通过Ajax进行异步发送。

JavaScript (jQuery Ajax) 实现：客户端数据提交

接下来，我们编写JavaScript代码来处理表单提交事件，并将数据通过Ajax发送到后端。核心思想是阻止表单的默认同步提交行为，然后手动构建一个JSON对象，并通过$.ajax方法发送。

<script type="text/javascript">
    // 辅助函数：将表单数据转换为JSON对象
    function getFormDataAsJsonObject(formId) {
        var data = {};
        $(formId).find('input').each(function() {
            var key = $(this).attr('id'); // 使用id作为JSON键
            if (key) {
                data[key] = $(this).val();
            }
        });
        return JSON.stringify(data);
    }

    $(document).ready(function() {
        $('#myForm').on('submit', function(e) {
            e.preventDefault(); // 阻止表单的默认提交行为

            var jsonData = getFormDataAsJsonObject('#myForm'); // 获取JSON格式的表单数据

            $.ajax({
                type: "POST", // HTTP方法为POST
                url: "http://localhost:8080/submit", // 后端API的完整URL
                data: jsonData, // 要发送的JSON数据
                contentType: "application/json", // 告诉服务器请求体是JSON格式
                dataType: "json", // 期望服务器返回的数据类型是JSON
                success: function(response) {
                    console.log("数据提交成功！", response);
                    alert("表单提交成功！");
                },
                error: function(xhr, status, error) {
                    console.error("数据提交失败！", xhr.responseText);
                    alert("表单提交失败：" + xhr.responseText);
                }
            });
        });
    });
</script>

登录后复制

关键点：

立即学习“Java免费学习笔记（深入）”；

$(document).ready(...): 确保DOM加载完成后再绑定事件。
$('#myForm').on('submit', function(e) { ... });: 使用jQuery的on()方法监听表单的submit事件。
e.preventDefault();: 这是至关重要的一步，它阻止了浏览器执行表单的默认提交行为（即同步跳转页面），从而允许我们通过Ajax进行异步提交。
getFormDataAsJsonObject(formId): 这个自定义函数遍历表单中的所有input元素，并使用它们的id作为键，value作为值，构建一个JavaScript对象，然后使用JSON.stringify()将其转换为JSON字符串。
url: "http://localhost:8080/submit": 确保这里的URL与您的Spring Boot Controller中定义的路径完全匹配。
data: jsonData: 这是要发送到服务器的数据，已经是一个JSON字符串。
contentType: "application/json": 明确告诉服务器，请求体中的数据是JSON格式。这与Spring Boot Controller中的consumes属性相匹配。
dataType: "json": 告诉jQuery期望服务器返回的数据类型是JSON，以便jQuery自动解析。
success和error回调函数: 用于处理请求成功或失败后的逻辑，便于调试和用户反馈。

Spring Boot REST API：服务器端数据接收

在后端，我们使用Spring Boot构建REST Controller来接收和处理前端发送的JSON数据。

import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class DataSheetGenController {

    @PostMapping(value = "/submit", consumes = MediaType.APPLICATION_JSON_VALUE)
    public String getProject(@RequestBody Project project) {
        System.out.println("收到项目数据：");
        System.out.println("Revision: " + project.getRevision());
        System.out.println("Project Name: " + project.getProjectName());
        System.out.println("Product Description: " + project.getProdDesc());
        System.out.println("Product Code: " + project.getProdCode());
        System.out.println("Packing: " + project.getPacking());

        // 这里可以添加业务逻辑，例如将数据保存到数据库
        return "数据接收成功！"; // 返回一个简单的字符串作为响应
    }
}

登录后复制

关键点：

立即学习“Java免费学习笔记（深入）”；

@RestController: 组合了@Controller和@ResponseBody，表示这是一个RESTful控制器，其方法返回值直接作为HTTP响应体。
@PostMapping(value = "/submit", consumes = MediaType.APPLICATION_JSON_VALUE):
- @PostMapping("/submit"): 将此方法映射到HTTP POST请求，路径为/submit。
- consumes = MediaType.APPLICATION_JSON_VALUE: 明确指出此API端点只接受Content-Type为application/json的请求。这与前端Ajax请求中的contentType设置相匹配。
@RequestBody Project project: 这是核心。Spring框架会自动将HTTP请求体中的JSON数据反序列化（映射）到一个Project类型的Java对象。前提是JSON的键名（如revision）必须与Project类中的字段名（或其对应的getter/setter方法名）匹配。

Java数据模型 (POJO)：数据结构定义

为了让Spring Boot能够将接收到的JSON数据正确映射到Java对象，我们需要定义一个Plain Old Java Object (POJO) 类，其字段名与前端发送的JSON键名一致，并提供相应的getter和setter方法。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

public class Project {

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

    // Getter methods
    public String getRevision() {
        return revision;
    }
    public String getProjectName() {
        return projectName;
    }
    public String getProdDesc() {
        return prodDesc;
    }
    public String getProdCode() {
        return prodCode;
    }
    public String getPacking() {
        return packing;
    }

    // Setter methods
    public void setRevision(String revision) {
        this.revision = revision;
    }
    public void setProjectName(String projectName) {
        this.projectName = projectName;
    }
    public void setProdDesc(String prodDesc) {
        this.prodDesc = prodDesc;
    }
    public void setProdCode(String prodCode) {
        this.prodCode = prodCode;
    }
    public void setPacking(String packing) {
        this.packing = packing;
    }
}

登录后复制

关键点：

立即学习“Java免费学习笔记（深入）”；

字段名匹配: revision, projectName等字段名必须与前端JavaScript构建JSON对象时使用的键名（即HTML输入框的id）完全一致。
Getter和Setter方法: Spring Boot（通过Jackson库）在反序列化JSON到Java对象时，会利用这些getter和setter方法来访问和设置对象的属性。

常见问题与解决方案

在实现Ajax与REST API集成时，开发者常会遇到一些问题。以下是针对本教程场景的常见问题及解决方案：

URL不匹配 (HttpRequestMethodNotSupportedException 或 404 Not Found)
- 问题: 前端Ajax请求的url与后端@PostMapping定义的路径不一致。例如，Ajax请求http://localhost:8080/，而后端是/submit。
- 解决方案: 确保Ajax url（例如http://localhost:8080/submit）与Spring Boot Controller中的@PostMapping(value = "/submit")完全匹配。
Content-Type不匹配 (415 Unsupported Media Type)
- 问题: 前端Ajax请求发送的数据类型与后端consumes属性期望的数据类型不一致。例如，Ajax未设置contentType: "application/json"，或后端未指定consumes。
- 解决方案: 确保Ajax请求中设置了contentType: "application/json"，并且Spring Boot Controller的@PostMapping注解中包含consumes = MediaType.APPLICATION_JSON_VALUE。
数据格式不匹配 (400 Bad Request)
- 问题: 前端发送的JSON字符串结构与后端@RequestBody期望的Java对象结构不匹配。例如，前端发送的是一个JSON数组[{name: "key", value: "val"}]，而后端期望的是一个JSON对象{key: "val"}。
- 解决方案: 确保前端JavaScript构建的JSON字符串是后端Java模型（POJO）能够直接映射的结构。如本教程所示，应构建{"revision": "...", "projectName": "..."}这样的JSON对象。
表单同步提交 (e.preventDefault() 缺失)
- 问题: 点击提交按钮后，页面发生刷新或跳转，而不是执行Ajax请求。
- 解决方案: 在Ajax请求处理函数的第一行添加e.preventDefault();来阻止表单的默认提交行为。
jQuery未加载或版本问题
- 问题: JavaScript代码中出现$未定义或jQuery相关方法无效的错误。
- 解决方案: 确保在您的自定义JavaScript代码之前，已经正确引入了jQuery库的CDN链接或本地文件。

总结

通过本教程，您应该已经掌握了如何使用jQuery Ajax将HTML表单数据以JSON格式提交到Spring Boot REST API。核心步骤包括：

HTML表单: 为输入字段设置有意义的id，并移除默认提交属性。
JavaScript (Ajax): 引入jQuery，使用$(formId).on('submit', ...)监听提交事件，e.preventDefault()阻止默认行为，将表单数据转换为JSON字符串，并使用contentType: "application/json"发送请求到正确的URL。
Java Model (POJO): 定义与JSON结构匹配的Java类，包含getter和setter方法。
Spring Boot Controller: 使用@PostMapping定义API路径，consumes = MediaType.APPLICATION_JSON_VALUE指定接受JSON类型，并通过@RequestBody注解将JSON请求体自动映射到Java POJO。

遵循这些步骤和注意事项，您将能够成功实现前端与后端REST API之间的数据异步交互，构建更加动态和响应迅速的Web应用程序。

以上就是使用Ajax向Java REST API提交HTML表单数据的详细内容，更多请关注php中文网其它相关文章！