2023-04-30-前端如何提交数据给后端包含前端和后端代码

2023-04-30 约 1326 字预计阅读 3 分钟

https://bing.ee123.net/img/rand?artid=130452104

前端如何提交数据给后端(包含前端和后端代码)

前端使用Ajax提交Json数据给Spring Boot后端

如果你想提交表单数据到服务器,可以使用Ajax技术将表单数据通过HTTP POST请求到发送到服务器.

前端代码如下

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>表单转JSON后提交到服务器</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function convertToJsonAndSend() {
            var form = document.forms[0];
            var formData = new FormData(form);
            var json = {};
            for (var [key, value] of formData.entries()) {
                json[key] = value;
            }
            $.ajax({
                type: 'POST',//请求方法使用POST
                url: '/submit-form',//提交到的路径(和controller的注解路径要一致)
                data: JSON.stringify(json),
                contentType: 'application/json',
                success: function(response) {
                    console.log(response);
                },
                error: function(xhr, status, error) {
                    console.log(error);
                }
            });
        }
    </script>
</head>
<body>
<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone"><br><br>
    <button type="button" onclick="convertToJsonAndSend()">表单转JSON后提交到服务器</button>
</form>
</body>
</html>

在上面的代码中，我们使用 jQuery 的 $.ajax() 方法将表单数据转化为 JSON 并通过 HTTP POST 请求发送到服务器的 /submit-form 路径。服务器可以通过该路径接收表单数据并进行处理。注意，我们需要设置 contentType 为 application/json ，以确保数据以 JSON 格式发送到服务器。

当服务器成功接收并处理表单数据时，可以返回一个响应，该响应会被 success 回调函数接收并打印到浏览器控制台中。如果发送请求时出现错误，可以通过 error 回调函数接收并打印错误信息。

当用户点击按钮时，表单数据将被转化为 JSON 并发送到服务器。

这边我们后端使用Spring Boot

在 Spring Boot 中，可以使用 @RequestBody 注解将 HTTP POST 请求中的 JSON 数据映射到 Java 对象中。下面是一个示例代码：

首先要有一个类,专门存储表单数据(接收到JSON数据后将数据转成对象用的类)

public class FormData {
    private String name;
    private String email;
    private String phone;

    // 必须提供无参构造函数
    public FormData() {}

    // 提供 getter 和 setter 方法
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    @Override
    public String toString() {
        return "FormData{" +
                "name='" + name + '\'' +
                ", email='" + email + '\'' +
                ", phone='" + phone + '\'' +
                '}';
    }
}

在 FormData 类中，我们提供了无参构造函数和 getter/setter 方法。这是因为 Spring Boot 在将 JSON 数据映射到 Java 对象时需要使用无参构造函数创建对象，并使用 getter/setter 方法设置对象的属性值。

2.controller层的实例代码

@RestController
public class TestController {
    @PostMapping("/submit-form")
    public ResponseEntity<String> submitForm(@RequestBody FormData formData) {
        System.out.println(formData.toString());//在IDE的控制台可以看到对象的属性
        return ResponseEntity.ok("Form data submitted successfully.");//成功后将引号里面的东西打印到浏览器的控制台上
    }
}

在上面的代码中，我们使用 @PostMapping 注解将 /submit-form 路径映射到 submitForm() 方法上。该方法使用 @RequestBody 注解将 HTTP POST 请求中的 JSON 数据映射到 FormData 对象中。 FormData 对象包含表单中的三个字段： name 、 email 和 phone 。处理表单数据的逻辑可以在 submitForm() 方法中实现。

当服务器成功接收并处理表单数据时，可以返回一个响应，该响应会被发送到前端。在上面的代码中，我们使用 ResponseEntity.ok() 方法返回一个 HTTP 状态码为 200 的响应，并包含一个成功消息。你可以根据实际需求返回不同的响应。

当用户点击提交按钮时，表单数据将被转化为 JSON 并发送到服务器。服务器将接收到 JSON 数据并映射到 FormData 对象中，然后可以对表单数据进行处理。

运行服务后填写信息,提交表单

浏览器控制台可以看到

IDE控制台可以看到的toString方法

至此,成功将前端表单的数据发送到后端.

6874747073:3a2f2f626c6f672e6373646e2e6e65742f797667653636392f:61727469636c652f64657461696c732f313330343532313034

目录

2023-04-30-前端如何提交数据给后端包含前端和后端代码

前端如何提交数据给后端(包含前端和后端代码)

前端使用Ajax提交Json数据给Spring Boot后端