ajax接口调用发送什么给服务器？接口请求参数详解

ajax接口调用发送给服务器的，本质上是一个标准HTTP请求，里面装着请求行、请求头和请求体三部分，请求体是服务器真正关心的数据载体，而请求头里的Content-Type决定了服务器用哪种方式拆开这包数据。

很多前端初学者对着Network面板发懵,明明接口通了，后端却说自己啥也没收到，要弄清楚这个问题，得从ajax请求本身讲起。

ajax接口调用发送什么给服务器：一个HTTP报文的三层结构

打开浏览器开发者工具,切到Network面板，点一条xhr记录，就能看到这次请求的完整内容，无论是用了XMLHttpRequest还是fetch，最终发送出去的都符合HTTP报文规范。

请求行：方法和URL决定路由

第一行叫请求行,

POST /api/user/login HTTP/1.1

POST告诉服务器你要做新增动作,/api/user/login告诉服务器调哪个接口，HTTP/1.1是协议版本，如果是GET请求，数据会拼在URL后面：

GET /api/user/login?name=zhangsan&age=25 HTTP/1.1

服务器拿到URL后,把query string里的参数解析出来。

请求头：服务器靠它解析你的数据

请求头是你寄快递时贴在包裹外面的面单,实际发送时包含很多字段，以下几个最关键：

• Content-Type：声明请求体是什么格式，直接影响服务器怎么解析
• Accept：告诉服务器你希望返回的是JSON还是其他格式
• Authorization：把token放在这里做身份认证
• Cookie：维持登录状态
• Origin与Referer：告诉服务器请求来自哪个页面，跨域拦截经常用到它

其中Content-Type最要命，忘了写或写错，服务器可能直接返回400。

请求体：POST请求里真正的业务数据

请求体是ajax接口调用发送给服务器的主体内容,日常开发中看到这几种形式：

• 表单字符串：name=zhangsan&age=25
• JSON字符串：{“name”:”zhangsan”,”age”:25}
• FormData对象：包含普通字段和文件流
• 纯文本或XML

服务器解析完请求体,才能执行增删改查，这就是ajax接口调用“发送什么”的完整答案：一个标准HTTP报文，业务数据藏在请求体里，格式由Content-Type指定。

GET与POST：数据位置不同导致后端接收方式迥异

很多后端新手困惑,为什么同样的参数，GET能拿到，POST却拿到null，原因在于数据位置不同。

GET把参数放在URL查询字符串里,服务器从地址栏解析，POST把数据放在请求体里，服务器必须根据Content-Type去请求体里解，两者的处理路径完全不同。

jquery ajax发送json数据给服务器时的content-type

jQuery的$.ajax方法默认Content-Type是application/x-www-form-urlencoded，也就是表单格式，如果你传一个JS对象，jQuery会自动把它序列化成name=zhangsan&age=25的字符串，这让很多人误以为后端一定能收到，但如果后端明确要求JSON，你得这样写：

$.ajax({
  url: '/api/save',
  type: 'POST',
  contentType: 'application/json',
  data: JSON.stringify({ name: 'zhangsan' }),
  success: function(res) {
    console.log(res);
  }
});

注意两个动作：JSON.stringify把对象转成字符串，contentType改成application/json，少一样，后端用$_POST或request.form都接不到。

请求体三种格式：JSON、URL编码、FormData各有脾气

请求体的格式不止一种,前端选哪种，后端就得按哪种方式拆，这直接关系到“ajax接口调用发送什么给服务器”的最终效果。

application/json：前后端分离项目的默认选择

现在写接口,绝大多数团队默认用JSON，请求体长这样：

{"name":"zhangsan","age":25,"city":"beijing"}

这个字符串在传输层没有任何语法糖,就是纯文本，业内专家指出，Content-Type写错比业务逻辑出错更隐蔽，因为服务器不报错，只是解析字段全为空。

application/x-www-form-urlencoded：老表单的求生欲

这是HTML表单默认的提交方式,请求体长这样：

name=zhangsan&age=25&city=beijing

服务器把这串字符按&拆开按=映射成键值对，PHP的$_POST、Java的@RequestParam都吃这一套，如果你的接口是给老系统用的，保留这个格式没毛病。

multipart/form-data：文件上传只能选它

上传文件时,JSON撑不住二进制流，你得用FormData：

const fd = new FormData();
fd.append('file', fileInput.files[0]);
fd.append('comment', '这是说明文字');
fetch('/api/upload', {
  method: 'POST',
  body: fd
});

浏览器会自动设置Content-Type为multipart/form-data，并在末尾加一段boundary分隔符，此时不要手动指定Content-Type，否则boundary丢了，后端解析会失败。

vue axios post请求体格式的常见坑

axios在浏览器端默认把普通对象序列化为JSON,这一点跟jQuery不一样，很多封装代码里改了headers的Content-Type，导致后端用@RequestBody接收时拿到undefined。

正确的常规写法：

axios.post('/api/save', {
  name: 'zhangsan',
  age: 25
});

axios自动设置Content-Type为application/json，不需要手动stringify，如果你用了自定义封装，务必检查拦截器里有没有动headers。

fetch post json接口返回数据格式与axios的差异

fetch和axios虽然都能发ajax请求,但序列化方式的差异经常坑人。

fetch需要手动写两步：

fetch('/api/save', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'zhangsan' })
})
.then(res => res.json())
.then(data => console.log(data));

axios则省事得多：

axios.post('/api/save', { name: 'zhangsan' })
.then(res => console.log(res.data));

一个需要手动设header和stringify,另一个自动处理，这导致团队协作时，有人用fetch有人用axios，后端接收参数的行为就不统一，建议在项目里定好规矩，要么统一axios，要么统一fetch，不然排查参数问题会耗费大量时间。

服务器端接收ajax post参数的真实场景

前端少一个Content-Type，后端就多一道排查成本，下面列几个主流后端是怎么取参数的。

PHP接收JSON必须读php://input

如果前端用application/json发送，$_POST是空的，正确做法是：

$data = json_decode(file_get_contents('php://input'), true);

只有表单格式才能直接走$_POST。

Node.js用express.json()中间件

Express框架里,必须挂载对应中间件才能解析请求体：

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

忘了挂,req.body就是undefined，接口直接挂。

Python Flask用get_json()

Flask中正确姿势：

data = request.get_json()
if data is None:
    return {'error': 'not json'}, 400

get_json只有Content-Type为application/json时才有返回值，否则是None。

ASP.NET Core中ajax post接收参数的正确姿势

ASP.NET Core里，JSON格式用[FromBody]绑定，表单格式用[FromForm]绑定，写错属性，参数就是默认值：

[HttpPost]
public IActionResult Save([FromBody] UserDto user)
{
    return Ok(user);
}

前端发JSON,后端就用[FromBody]，前端发FormData，后端就用[FromForm]，两边对齐了，数据才会整齐落地。

Q&A：ajax接口调用发送内容的三个高频疑问

ajax接口调用发送什么给服务器时会出现跨域拦截？

浏览器跨域时,如果请求头里包含自定义字段或Content-Type非简单请求，会先发OPTIONS预检，服务器没正确响应CORS头，真正的POST请求根本发不出去，Origin字段不在白名单内也会被拦截。

为什么jquery ajax发送json数据给服务器后端却收到null？

多半是data没做JSON.stringify，或者contentType没设成application/json，jQuery会把对象转成表单格式，后端按JSON解析自然是空。

vue axios post请求体格式与jQuery能统一吗？

不能强制统一,axios默认JSON，jQuery默认表单，后端接口设计时明确一种格式，前端按规范提交，建议新项目统一用JSON，老接口保留表单格式。

ajax接口调用发送给服务器的是一个完整的HTTP报文，请求行、请求头、请求体重各司其职，只要把Content-Type和后端接收方式对齐，你就能稳住接口层的最后一道门槛。