ajax-post参数传递方式

今天在写一个测试的ajax请求的时候,突然忘记了怎么用request body 传参。借这个机会,总结一下。当从前端通过ajax向后台发起一个post请求时,一共有三种方式传递参数。

通过url传递参数

  • ajax:通常采用形如以下的js代码。这样实质上是拼成了这样一个url : http://lefer.cn/getUserInfo?username=lefer

    1
    2
    3
    4
    5
    6
    7
    8
    9
    $.post({
    url: "http://lefer.cn/getUserInfo",
    data: {
    username:"lefer",
    },
    success: function( result ) {
    alert(result);
    }
    }),
  • java:通常在controller中采用形如以下的代码来接受参数。

    1
    2
    3
    4
    @RequestMapping("/getUserInfo")
    public void getUserInfo(@RequestParam String username){
    System.out.println(username);
    }
  • 这种方式是最常用的方式。每一个参数都是独立的,通常表单都是按照这种形式提交。

通过request body传递参数

  • ajax: 通常采用形如以下的js代码。在http request中,参数其实存放在 Request Payload 区域。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $.post({
    url: "http://lefer.cn/getUserInfo",
    contentType: 'application/json',
    data: JSON.stringify({
    username:"lefer",
    }),
    dataType:"json",
    success: function( result ) {
    alert(result);
    }
    }),
  • java:通常在controller中采用形如以下的代码来接受参数。

    1
    2
    3
    4
    @RequestMapping("/getUserInfo")
    public void getUserInfo(@RequestBody Map map){
    System.out.println(map.get("username"));
    }
  • 这种方式后端接受到的是一个序列化后的json字符串。

通过header传递参数

  • ajax:通常采用形如以下的js代码。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $.post({
    url: "http://lefer.cn/getUserInfo",
    headers : {"Authorization":"Bearer dfdfd",
    "Content-Type": "application/json; charset=utf-8",
    "username":"lefer"},
    data: {},
    success: function( result ) {
    alert(result);
    }
    }),
  • java:通常在controller中采用形如以下的代码来接受参数。

    1
    2
    3
    4
    @RequestMapping("/getUserInfo")
    public void getUserInfo(httpServletRequest request){
    System.out.println(request.getHeader("username"));
    }
  • 这种方式不太建议使用,http header 中的信息很容易在处理中丢失,比如在应对跨域请求的时候或者某些网关处理

END