前端如何提交数据给后端(包含前端和后端代码)_前端写完代码怎么提交给后端

最新推荐文章于 2024-07-24 23:00:08 发布

2301_82243710

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量536

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/2301_82243710/article/details/138239417

版权

<!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 + '\'' +
                '}';
    }
}

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

技术要深入到什么程度？
做久了技术总要转型管理？
我能做什么，我想做什么？
一技之长，就是深耕你的专业技能，你的专业技术。（重点）
独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）
拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

栈内技术 - 是指你的前端专业领域技术
栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识
工程经验 - 是建设专业技术体系的“解决方案”
带人做事 - 是对团队协作能力的要求
业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

2301_82243710

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
前端如何提交数据给后端(包含前端和后端代码)_前端写完代码怎么提交给后端

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。技术要深入到什么程度？做久了技术总要转型管理？我能做什么，我想做什么？一技之长，就是深耕你的专业技能，你的专业技术。（重点）独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）拥有事业，选择一份使命，带领团队实现它。（创业）一技之长分五个层次栈内技术 - 是指你的前端专业领域技术栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识。
复制链接

扫一扫