目錄

一、參考文獻

二、勇敢嘗試

• 前端js傳送ajax請求（ application/x-www-form-urlencoded ）

         var jsonObj = {"openid":"xxx","username":"Ed sheeran","password":"123"};
            /*
                Jquery預設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接受引數。前端報 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

  @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"};
            /*
                Jquery預設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"));
  }
  }

  ​