前端使用Ajax提交Json数据给Spring Boot后端
如果你想提交表单数据到服务器,可以使用Ajax技术将表单数据通过HTTP POST请求到发送到服务器.
前端代码如下
<!DOCTYPEhtml><html><metacharset="utf-8"><head><title>表单转JSON后提交到服务器</title><scriptsrc="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>functionconvertToJsonAndSend(){var form = document.forms[0];var formData =newFormData(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><labelfor="name">Name:</label><inputtype="text"id="name"name="name"><br><br><labelfor="email">Email:</label><inputtype="email"id="email"name="email"><br><br><labelfor="phone">Phone:</label><inputtype="tel"id="phone"name="phone"><br><br><buttontype="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数据后将数据转成对象用的类)
publicclassFormData{privateString name;privateString email;privateString phone;// 必须提供无参构造函数publicFormData(){}// 提供 getter 和 setter 方法publicStringgetName(){return name;}publicvoidsetName(String name){this.name = name;}publicStringgetEmail(){return email;}publicvoidsetEmail(String email){this.email = email;}publicStringgetPhone(){return phone;}publicvoidsetPhone(String phone){this.phone = phone;}@OverridepublicStringtoString(){return"FormData{"+"name='"+ name +'\''+", email='"+ email +'\''+", phone='"+ phone +'\''+'}';}}
在
FormData
类中，我们提供了无参构造函数和 getter/setter 方法。这是因为 Spring Boot 在将 JSON 数据映射到 Java 对象时需要使用无参构造函数创建对象，并使用 getter/setter 方法设置对象的属性值。
2.controller层的实例代码
@RestControllerpublicclassTestController{@PostMapping("/submit-form")publicResponseEntity<String>submitForm(@RequestBodyFormData formData){System.out.println(formData.toString());//在IDE的控制台可以看到对象的属性returnResponseEntity.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方法
至此,成功将前端表单的数据发送到后端.
版权归原作者 百色彭于晏 所有， 如有侵权，请联系我们删除。