快捷導(dǎo)航

SpringBoot前后端json數(shù)據(jù)交互的全過程記錄

更新時間：2022年03月14日 10:49:16 作者：北冥友余

現(xiàn)在大多數(shù)互聯(lián)網(wǎng)項目都是采用前后端分離的方式開發(fā),下面這篇文章主要給大家介紹了關(guān)于SpringBoot前后端json數(shù)據(jù)交互的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、參考文獻(xiàn)

原生Ajax與JQuery Ajax

SpringMVC接受JSON參數(shù)詳解及常見錯誤總結(jié)

提交方式為 POST 時，
JQuery Ajax 以 application/x-www-form-urlencoded 上傳 JSON對象，
后端用 @RequestParam 或者Servlet 獲取參數(shù)。
JQuery Ajax 以 application/json 上傳 JSON字符串，
后端用 @RquestBody 獲取參數(shù)。
總結(jié)成表

Controller接收參數(shù)以及參數(shù)校驗

AJAX POST請求中參數(shù)以form data和request payload形式在servlet中的獲取方式

二、勇敢嘗試

前端js發(fā)送ajax請求（ application/x-www-form-urlencoded ）

       var jsonObj = {"openid":"xxx","username":"Ed sheeran","password":"123"};
          /*
              Jquery默認(rèn)Content-Type為application/x-www-form-urlencoded類型
           */
          $.ajax({
              type: 'POST',
              url: "/login",
              dataType: "json",
              data: JSON.stringify(jsonObj),
              success: function(data) {
                  console.log(data)
              },
              error: function() {
                  console.log("fucking error")
              }
          });

后端Servlet接受參數(shù)。前端報 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 接受參數(shù)。前端報 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 接受參數(shù)。前端報 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，后端能接受到參數(shù)

    $.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"));
}
}

有時候，我想在后端使用對象來獲取參數(shù)。前端報 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"};
          /*
              Jquery默認(rèn)Content-Type為application/x-www-form-urlencoded類型
           */
          $.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"));
}
}