前端如何提交数据给后端(包含前端和后端代码)
前端使用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',//请求方法使用POSTurl: '/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;}@Overridepublic 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方法
至此,成功将前端表单的数据发送到后端.
前端如何提交数据给后端(包含前端和后端代码)相关推荐
- 前端常见提交数据方式对比
前言 目前的前后端的界限越来越明显,当然,其实现通信的方式主要就是通过Http协议完成.但是在这个过程中,提交数据的格式有时候不同确实是让后端比较头疼的问题,那么,阿福就来总结下常用的提交数据的方式有 ...
- 解决前端传的数据是下划线命名而后端是驼峰命名的Json传递数据的问题
由于之前个人开发项目都是统一命名,不会出现这种问题,但是到公司实习前后端分离前端是下划线命名,而后端是驼峰命名,所以导致数据的传递需要转换 @JsonProperty("user_id&qu ...
- ajax post提交数据_如何用前端知识获取数据,制作一个微信订餐后台案例?
在介绍案例之前,我们先来介绍以下在node中如何获取数据. get方式 1.把发送给服务器的数据追加在请求头的url后面 2.发送数据的大小有限制 3.get方式发送给服务器数据会有缓存. post方 ...
- web前端开发需要学什么(包含前端学习路线)
前端开发,做到后面,是可以走很多方向的: 但是要保证后期的平滑过度,前期还是要把一些必须的知识搞扎实的: web前端开发需要学什么 环境搭建 前端环境很好搭建,编辑器+浏览器即可. 浏览器推荐使用 C ...
- java前端ajax提交数据_Java 前端使用Ajax通过FormData传递文件和表单数据到后台
提交 1,当仅仅想上传文件到后台 function tijiao(){ var file = $("#image")[0].files[0]; //打印file 为对象 conso ...
- java antd实现登录,AntDesign(React)学习-4 登录页面提交数据简单实现
github代码:https://github.com/zhaogaojian/jgdemo 全国肺炎,过节期间没地方去在家学习antd. 一.感觉antd pro项目太庞大了,可以学习下结构和代码风 ...
- 四种常见的 POST 提交数据方式 专题
原文地址为: 四种常见的 POST 提交数据方式 专题 定义和用法 enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码. 默认地,表单数据会编码为 "application ...
- 四种常见的 POST 提交数据方式--good
http://www.cnblogs.com/softidea/p/5745369.html 四种常见的 POST 提交数据方式--good HTTP/1.1 协议规定的 HTTP 请求方法有 OPT ...
- 四种常见的 POST 提交数据方式
HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 POST 一般用来向服务端提交数据,本文 ...
最新文章
- checkIP.sh
- 前端学习(1603):脚手架组件使用
- 关于:程序兼容多种数据库
- 【Kafka】Kafka NIO
- latex textbf没有用_把知乎改造成LaTex创作平台
- 国家java认证考试报名入口,赶紧收藏!
- 浅谈-国标GB28181协议上下级对接国标编码要求(四)
- 双人贪吃蛇小游戏C++原创
- 基于java实现学科竞赛管理系统【Springboot+mybatis+layui】
- 华为无线网卡无服务器,联通华为无线上网卡连接时连接被终止解决方法 - 小众知识...
- 回头看一看我的2017年
- windows server2012 r2修改密码
- Norgen AAV提取剂盒说明书(含特色)
- 【PyTorch】切记:GeForce RTX 3090 显卡仅支持 CUDA 11 以上的版本!
- php中UNIX时间戳转换为日期
- 一篇关于保险与公积金的文章,看了绝对受益匪浅!!
- XP框架 微X插件/抖音插件/微信机器人 /自动抢红包 等等天堂级功能....
- Tomcat 降权操作
- html如何添加多个视频教程,html多格式视频教程
- php如何开启gd2,详解php开启gd库的两种方法