SpringBoot前后端json数据交互的全过程记录

2024-04-02 19:04:59 716人浏览泡泡鱼

Python 官方文档：入门教程 => 点击学习

摘要

目录一、参考文献二、勇敢尝试三、最终选择交互方式总结一、参考文献原生ajax与Jquery Ajax springMVC接受JSON参数详解及常见错误总结提交方式为 POST 时

一、参考文献

原生ajax与Jquery Ajax

springMVC接受JSON参数详解及常见错误总结

提交方式为 POST 时，
JQuery Ajax 以 application/x-www-fORM-urlencoded 上传 jsON对象，
后端用 @RequestParam 或者Servlet 获取参数。
JQuery Ajax 以 application/json 上传 JSON字符串，
后端用 @RquestBody 获取参数。
总结成表

Controller接收参数以及参数校验

AJAX POST请求中参数以form data和request payload形式在servlet中的获取方式

二、勇敢尝试

前端js发送ajax请求（ application/x-www-form-urlencoded ）

       var jsonObj = {"openid":"xxx","username":"Ed sheeran","passWord":"123"};
          
          $.ajax({
              type: 'POST',
              url: "/login",
              dataType: "json",
              data: JSON.stringify(jsonObj),
              success: function(data) {
                  console.log(data)
              },
              error: function() {
                  console.log("fucking error")
              }
          });

后端Servlet接受参数。前端报 200，后端报返回值都是null

@Controller
public class LoginController {
  @PostMapping("/login")
  public void login(httpservletRequest request){
      System.err.println(request.getParameter("openid"));
      System.err.println(request.getParameter("username"));
      System.err.println(request.getParameter("password"));
}

后端改 @RequestParam 接受参数。前端报 404，后端报 Required String parameter ‘username’ is not present

@Controller
public class LoginController {
  @PostMapping("/login")
  public void login(@RequestParam("username") String username,
                    @RequestParam("password") String password,
                    @RequestParam("openid") String openid){
      System.err.println(username);
      System.err.println(password);
      System.err.println(openid);
  }

后端改 @RequestBody 接受参数。前端报 415，后端报 Content type ‘application/x-www-form-urlencoded;charset=UTF-8’ not supported

Http status 415 Unsupported Media Type

What is 415 ?

Http 415 Unsupported Media Type

The client error response code indicates that the server refuses to accept the request because the payload format is in an unsupported format.

Let’s look at the broswer ?

How to resolve 405 problem when using ajax post @ResponseBody return json data ?

if you use spring 4.x jar,please following me(Maven Repository-Spring 4.x.jar)
add related jar package

spring-WEBmvc.x.x.jar

jackson-databind.jar

jackson-core.jar

jackson-annotations.jar

In Spring Configuration file,add following code
<bean class="org.springframework.web.servlet.mvc.
annotation.AnnotationMethodHandlerAdapter">  
    <property name="messageConverters">  
        <list>  
            <ref bean="jsonHttpMessageConverter" />  
        </list>  
    </property>  
</bean>  

<bean id="jsonHttpMessageConverter" class="org.springframework.http.converter.json.
MappingJackson2HttpMessageConverter">  
    <property name="supportedMediaTypes">  
        <list>  
          <value>application/json;charset=UTF-8</value>  
        </list>  
    </property>  
</bean>
In ajax , set contentType : ‘application/json;charse=UTF-8’
    var data = {"name":"jsutin","age":18};
    $.ajax({  
        url : "/ASW/login.html",  
        type : "POST",  
        data : JSON.stringify(data),  
        dataType: 'json',  
        contentType:'application/json;charset=UTF-8',      
        success : function(result) {  
            console.log(result);  
        }  
    }); 
In server ，using @RequestBody anotation receive json data,and using @ResponseBody anotation response json to jsp page
@RequestMapping(value = "/login",method = RequestMethod.POST)
public @ResponseBody User login(@RequestBody User user){
    system.out.println(user.getName);
    system.out.println(user.getAge);
}

@Controller
public class LoginController {
  @PostMapping("/login")
  public void login(@RequestBody Map<String,Object> map){
      System.err.println(map.get("username"));
      System.err.println(map.get("password"));
      System.err.println(map.get("openid"));
  }

前端加 contentType : “application/json”。前端报 200，后端能接受到参数

    $.ajax({
              type: 'POST',
              url: "/login",
              dataType: "json",
              data: JSON.stringify(jsonObj),
              contentType : "application/json",
              success: function(data) {
                  console.log(data)
              },
              error: function() {
                  console.log("fucking error")
              }
          });

@Controller
public class LoginController {
  @PostMapping("/login")
  public void login(@RequestBody Map<String,Object> map){
      System.err.println(map.get("username"));
      System.err.println(map.get("password"));
      System.err.println(map.get("openid"));
}
}

有时候，我想在后端使用对象来获取参数。前端报 200，后端也ok

@Controller
public class LoginController {
  @PostMapping("/login")
  public void login(@RequestBody Form form){
      System.err.println(form);
}
}

public class Form {
  private String openid;
  private String username;
  private String password;

  public String getOpenid() {
      return openid;
  }

  public void setOpenid(String openid) {
      this.openid = openid;
  }

  public String getUsername() {
      return username;
  }

  public void setUsername(String username) {
      this.username = username;
  }

  public String getPassword() {
      return password;
  }

  public void setPassword(String password) {
      this.password = password;
  }

  @Override
  public String toString() {
      return "Form{" +
              "openid='" + openid + '\'' +
              ", username='" + username + '\'' +
              ", password='" + password + '\'' +
              '}';
  }
}

三、最终选择交互方式

前端 application/json，上传 josn字符串，后端使用对象或者 Map

前端代码

       var jsonObj = {"openid":"xxx","username":"Ed sheeran","password":"123"};
          
          $.ajax({
              type: 'POST',
              url: "/login",
              dataType: "json",
              data: JSON.stringify(jsonObj),
              contentType : "application/json",
              success: function(data) {
                  console.log(data)
              },
              error: function() {
                  console.log("fucking error")
              }
          });

后端代码1

@Controller
public class LoginController {
  @PostMapping("/login")
  public void login(@RequestBody Form form){
      System.err.println(form);
}
}

后端代码2

@Controller
public class LoginController {
  @PostMapping("/login")
  public void login(@RequestBody Map<String,Object> map){
      System.err.println(map.get("username"));
      System.err.println(map.get("password"));
      System.err.println(map.get("openid"));
}
}

总结

到此这篇关于SpringBoot前后端json数据交互的文章就介绍到这了,更多相关SpringBoot前后端json数据交互内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

您可能感兴趣的文档:

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: SpringBoot前后端json数据交互的全过程记录

本文链接: https://www.lsjlt.com/news/142349.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

SpringBoot前后端json数据交互的全过程记录

目录一、参考文献二、勇敢尝试三、最终选择交互方式总结一、参考文献原生Ajax与JQuery Ajax SpringMVC接受JSON参数详解及常见错误总结提交方式为 POST 时...

99+

2022-11-13
AJAX SpringBoot 前后端数据交互的项目实现

目录1. Ajax 概述2. 基于 JQuery 的 AJAX 语法1. Ajax 概述 Ajax 的英文全称是 ”Asynchronous JavaScript and...

99+

2022-11-13
python+html实现前后端数据交互界面显示的全过程

目录前言1.python开发工具2.项目创建总结前言最近刚刚开始学习如何将python后台与html前端结合起来，现在写一篇blog记录一下，我采用的是前后端不分离形式。话不多说...

99+

2022-11-11
SpringBoot实现前后端、json数据交互以及Controller接收参数的几种常用方式

目录前言获取参数的几种常用注解一.请求路径参数 get请求二、Body参数 POST请求四、HttpServletRequest 五、参数校检最终选择交互方式参考文献总结前...

99+

2022-11-13
SpringBoot多数据源配置的全过程记录

目录前言配置文件依赖构建 AbstractRoutingDataSource 数据源切换目录总结前言多数据源的核心就是向 IOC 容器注入 AbstractRouti...

99+

2022-11-12
微信小程序前后端数据交互的详细图文教程

目录前言一微信小程序发送请求二后端接口接受小程序请求并返回数据三最后的效果图总结前言先简单说一下我写的这个危险小程序前后端交互的业务，主要是两个数据：supplyCount和...

99+

2022-11-13

微信小程序前后端数据交互怎么设置微信小程序如何和后端交互微信小程序前端后端和数据库