dataType和contentType区分:

contentType: 发送信息至服务器时内容编码类型,简单说告诉服务器请求类型的数据

   在调试js时候通过chrome的F12或firefox的firebug查看请求参数时,尤其请注意head

   默认值: "application/x-www-form-urlencoded"

dataType:告诉服务器,我要想什么类型的数据,除了常见的json、XML,还可以指定 html、jsonp、script或者text

SpringMVC中controller接收Json数据

1.jsp页面发送ajax的post请求:

function postJson(){
    var json = {"username" : "imp", "password" : "123456"};
    $.ajax({
        type : "post",
        url : "<%=basePath %>ajaxRequest",
        contentType : "application/json;charset=utf-8",
        dataType : "json",
        data: JSON.stringify(json),
        success : function(data){
            alert("username:"+data.username+"   id:"+data.id);
        },
        error : function(){
            alert("请求失败");
        }
    })
}

注意:

1.在发送数据时,data键的值一定要写成JSON.stringify(json),将数据转换成json字符串格式,否则会抛出异常

2.basePath是项目根目录:

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

2.controller接收请求:

@ResponseBody
    @RequestMapping(value="/ajaxRequest",method=RequestMethod.POST)
    public User ajaxRequest(@RequestBody User user){
        System.out.println(user);
        return user;
    }

注意:

1.@ResponseBody修饰的方法返回的数据,springmvc将其自动转换成json格式,然后返回给前端

2.@RequestBody修饰目标方法的入参,可以将ajax发送的json字符串(或者JSOn对象的字符串形式)赋值给入参。当然这里的入参user是我们自定义的实体类型。

3.最后将user返回,springmvc自动将其转换成json返回给前端

4、其实 @RequestBody接收的是一个Json对象的字符串,而不是一个Json对象。然而在ajax请求往往传的都是Json对象,后来发现用 JSON.stringify(data)的方式就能将对象变成字符串。同时ajax请求的时候也要指定dataType: "json",contentType:"application/json" 这样就可以轻易的将一个对象或者List传到Java端,使用@RequestBody即可绑定对象或者List.

其它参考

javascript:void(0)

  • 原生Ajax与JQuery Ajax
  • SpringMVC接受JSON参数详解及常见错误总结
  • ajax和controller传递参数
  • 提交方式为 POST 时,
    1、JQuery Ajax 以 application/x-www-form-urlencoded 上传 JSON对象 ,后端用 @RequestParam 或者Servlet 获取参数。
    2、JQuery Ajax 以 application/json 上传 JSON字符串,后端用 @RquestBody 获取参数。
  • Controller接收参数以及参数校验
  • AJAX POST请求中参数以form data和request payload形式在servlet中的获取方式

实例1

 前端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

Http status 415 Unsupported Media Type

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