别再混淆！jQuery Ajax中dataType与content-type的作用及区别详解

dataType和content-type的核心区别：一个管“收”，一个管“发”

要搞清楚这俩参数，我给你打个最通俗的比方：假设你用快递寄东西——

dataType就像你告诉快递员：“我要收的是文件（JSON）还是包裹（HTML）？”，目的是让快递员（浏览器）帮你把收到的东西整理成你要的样子； content-type则是你告诉快递员：“我寄的是文件（JSON）还是包裹（表单数据）？”，目的是让收件人（后端）知道怎么拆开你寄的东西。

一句话 dataType管“接收数据的格式”，content-type管“发送数据的格式”，完全是两个方向的事儿，但很多人用的时候总把它们搞反。

我再给你举个真实例子：去年我帮朋友做一个预约挂号的小功能，他写的Ajax请求是这样的——

$.ajax({
 url: '/api/appoint',
 type: 'POST',
 data: { name: '张三', phone: '138XXXX1234' },
 dataType: 'json',
 success: function(res) {
 console.log(res);
 }
});

结果后端一直说“没收到phone参数”，我看了一眼代码就笑了——他没设content-type！因为默认的content-type是application/x-www-form-urlencoded（表单格式），但他传的是JSON对象，浏览器会把它转成name=张三&phone=138XXXX1234的字符串，可后端接口 expects的是JSON格式，自然解析不了。后来我帮他加了content-type: 'application/json'，再用JSON.stringify()把数据转成字符串，后端立马就收到参数了。

这就是content-type的作用：它是你和后端之间的“语言翻译器”——你得明确告诉后端，你发的是“中文”（JSON）还是“英文”（表单），不然后端听不懂。而dataType是你和浏览器之间的“翻译器”——你得告诉浏览器，你要的是“中文文档”（JSON）还是“图片”（html），不然浏览器会把收到的东西原封不动扔给你，比如明明是JSON字符串，却让你自己去JSON.parse()，麻烦得很。

再给你补个权威解释：根据jQuery官方文档的说明，dataType是“预期服务器返回的数据类型”，浏览器会根据这个参数设置Accept请求头（告诉服务器“我能接收这些格式”）；而content-type是“发送数据到服务器时所使用的内容类型”，对应Content-Type请求头（告诉服务器“我发的是这些格式”）（链接： rel=”nofollow”）。

具体场景怎么用？避开90%的常见坑

光知道区别还不够，得会用——我帮你整理了最常遇到的使用场景和最容易踩的坑，照着做保准你少走弯路。

先搞懂content-type：你发的“语言”，后端得能听懂

content-type的核心是“告诉后端，我发的是什么格式的数据”，不同的格式对应不同的设置方式，错一个字都可能出问题：

如果你要给后端发JSON对象（比如{ name: '张三', age: 18 }），一定要做两件事：

比如正确的代码是这样的：

$.ajax({
 url: '/api/user',
 type: 'POST',
 data: JSON.stringify({ name: '张三', age: 18 }),
 contentType: 'application/json', // 注意是contentType，不是content-type！
 dataType: 'json',
 success: function(res) {
 console.log(res);
 }
});

我之前碰到过一个刚学前端的同学，他没做这两步，结果后端收到的是[object Object]——这是对象的字符串表示，根本不是JSON，后端当然解析不了。

如果你的数据是表单格式（比如name=张三&age=18），不用特意设content-type，jQuery会默认用application/x-www-form-urlencoded——这也是最常见的“传统表单提交”格式，后端用$_POST（PHP）或req.body（Node.js）就能直接拿到参数。

比如：

$.ajax({
 url: '/api/login',
 type: 'POST',
 data: { username: 'admin', password: '123456' }, // 不用转字符串，jQuery会自动转成表单格式
 dataType: 'json',
 success: function(res) {
 console.log(res);
 }
});

如果你要上传文件（比如头像、Excel），得用FormData对象，这时候content-type会自动变成multipart/form-data——不用你自己写，jQuery会帮你处理。

比如：

var formData = new FormData();
formData.append('avatar', $('#file')[0].files[0]); // 选文件
formData.append('name', '张三');
$.ajax({
 url: '/api/upload',
 type: 'POST',
 data: formData,
 contentType: false, // 必须设为false，让浏览器自动处理content-type
 processData: false, // 必须设为false，不然jQuery会把FormData转成字符串
 dataType: 'json',
 success: function(res) {
 console.log(res);
 }
});

我之前做一个简历上传功能，一开始没设contentType: false，结果后端收到的文件是空的——因为jQuery把FormData转成了字符串，文件流全丢了。后来加上这两个参数，立马就好了。

再搞懂dataType：你要的“东西”，浏览器得帮你整理好

dataType的核心是“告诉浏览器，我要接收什么格式的数据”，常见的取值就三个：json、html、text，用对了能省好多事：

如果你后端返回的是JSON字符串（比如{"code":200,"data":{"name":"张三"}}），设dataType: 'json'，浏览器会自动帮你把字符串转成JSON对象——不用你自己写JSON.parse()，直接用res.data.name就能拿到值，超方便。

坑提醒：如果后端返回的JSON格式有问题（比如多了个逗号），dataType: 'json'会触发error回调，提示“parsererror”——这时候你得去检查后端的返回数据是不是合法JSON。

如果你用Ajax加载一个页面片段（比如商品列表、评论区），设dataType: 'html'，浏览器会把返回的HTML字符串直接给你，你可以用$('#container').html(res)插进页面里。

比如我之前做一个分页功能，点下一页的时候，用Ajax加载下一页的HTML，设dataType: 'html'，直接替换容器内容，比自己拼DOM方便多了。

如果后端返回的是纯文本（比如“操作成功”、“用户名已存在”），设dataType: 'text'，浏览器会原封不动把字符串给你，不用处理。

用表格帮你快速对比（再也不混淆）

为了让你更直观，我做了个对比表，把两个参数的核心信息全列出来了：

其实只要把“收”和“发”的逻辑理清楚，这两个参数根本不难。下次你写Ajax请求时，先问自己两个问题：我要给后端发什么格式的数据？我要接收什么格式的数据？ 想清楚这两个问题，再设置对应的参数，保准你少踩90%的坑。比如发JSON就设contentType: 'application/json'+JSON.stringify()，收JSON就设dataType: 'json'；发表单就用默认的contentType，收HTML就设dataType: 'html'。

我之前帮一个做博客的朋友调评论接口，他一开始把dataType设成html，结果后端返回的JSON字符串被当成HTML插进页面，显示成一堆乱码——后来改成dataType: 'json'，立马就好了。你看，就这么一个参数的差别，结果完全不一样。

如果你按这个方法试了，欢迎回来告诉我效果怎么样！

本文常见问题（FAQ）

dataType和content-type到底有什么不一样啊？

其实核心区别特简单——一个管“收”，一个管“发”。dataType是你告诉浏览器“我要接收啥格式的数据”，比如你要JSON，浏览器就帮你把后端返回的字符串自动转成能直接用的JSON对象；content-type是你告诉后端“我发的是啥格式的数据”，比如你发的是JSON，就得让后端知道该用啥方式解析你发过去的内容。打个最通俗的比方，就像寄快递，dataType是你跟快递员说“我收的是文件”，方便快递员帮你归类；content-type是你跟快递员说“我寄的是文件”，方便收件人（后端）知道怎么拆包裹，完全是两个方向的事儿。

发JSON数据的时候，content-type得咋设置啊？

发JSON数据一定得做两件事：首先把content-type明确设成application/json，其次得用JSON.stringify()把要传的JSON对象转成字符串。比如说你要传{name:’张三’, phone:’138XXXX1234′}，得写成data: JSON.stringify({name:’张三’, phone:’138XXXX1234′})，再加上contentType: ‘application/json’这行代码。我去年帮朋友调电商接口就碰到过，他没设这个，后端一直说没收到参数——因为默认的content-type是表单格式，后端根本认不出他发的JSON数据，改完之后立马就好了。

设了dataType为json，为啥会报parsererror错误啊？

这一般是后端返回的JSON格式有问题，比如多了个逗号、少了个引号，或者根本就不是JSON字符串（比如返回了HTML片段）。因为dataType设为json的话，浏览器会自动帮你解析后端返回的内容，如果返回的字符串不是合法的JSON格式，就会触发parsererror错误。碰到这种情况，你可以先把dataType改成text，看看后端返回的到底是啥内容，是不是真的符合JSON格式要求，比如有没有多余的空格或者语法错误。

content-type不设置的话，默认是什么啊？

默认是application/x-www-form-urlencoded，也就是表单数据格式。比如说你传{name:’张三’, age:18}这样的对象，浏览器会自动把它转成name=张三&age=18的字符串。这种格式适合大部分表单提交的场景，但如果后端接口要求的是JSON格式，你就必须自己设置content-type为application/json，不然后端根本解析不了你发的内容——我之前帮朋友做预约挂号功能时就踩过这坑，没设content-type，后端一直说没收到phone参数，改完就解决了。

上传文件的时候，content-type要怎么处理啊？

上传文件得用FormData对象，这时候content-type得设为false，同时还要把processData设为false。因为FormData会自动生成multipart/form-data类型的content-type，里面包含文件的边界信息，要是你自己手动设content-type，反而会把边界信息搞丢，导致后端收不到文件。我之前做简历上传功能时就碰到过，没设这俩参数，结果后端收到的文件是空的，加上contentType: false和processData: false之后，立马就正常了。

YUANLEISVIP

收藏 链接