JQueryajax的contentType
原理说明
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后⽤javascript来操作DOM⽽更新页⾯。XMLHttpRequest是ajax的核⼼机制，其原理此⽂不做阐述。通过对XMLHttpRequest对象的属性和⽅法的设置，与服务端之间进⾏基于http请求的消息传送。例如，XMLHttpRequest对象的setRequestHeader()⽅法是⽤来设置请求头的。这些过程都被封装在ajax中。在jquery ajax ⾥，发送信息⾄服务器时内容编码类型的设置是通过contentType字段表⽰的。dataType表⽰预期服务器返回的数据类型。请求成功后的回调函数success中将返回根据 dataType 参数进⾏处理后的数据。
这⾥之所以提到contentType这个字段，是因为它表⽰数据实体的类型，前后端要约定⼀致，通常前端应根据后端的要求传送对应的contentType 类型。类似于ajax的框架很多，它们都是基于XmlhttpRequest这个对象的，只是数据封装的形式略有不同。所以对此⽂content-type数据类型的理解，也有助于其他框架的数据类型传递时遇到的问题解决。
常见解决⽅式
遇到数据传递http请求的状态码为400时，通常会对content-type类型进⾏修改.
项⽬中常见的content-type有三种
application/x-www-form-urlencoded
application/x-www-form-urlencoded是常⽤的POST 提交数据的⽅式，普通的表单提交，或者js发包，如果不设置 content-type 属性，默认都是通过这种⽅式
application/json
现在越来越多的⼈把它作为请求头，⽤来告诉服务端消息主体是序列化后的 JSON 字符串。application/json⽤来告诉服务端消息主体是序列化后的 JSON 字符串，JSON 格式⽀持⽐键值对复杂得多的结构化数据。
multipart/form-data
使⽤表单上传⽂件时，必须让 form 的 enctyped 等于’multipart/form-data’。
如下是从基于JQuery⽂件上传插件ajaxfileupload.js中拷出来的⼀段代码，能帮助理解。
if (ding) {
jQuery(form).attr('encoding', 'multipart/form-data');
}
else {
jQuery(form).attr('enctype', 'multipart/form-data');
}
数据发送时需要与后端之间协商好传送的数据类型，那么接收时也是同理的，接收时，ajax⽤到的字段是data-type。
特别说明，有时候content-type是后台要求的application/json，但是仍然报http码为400的错误，这是因为ajax内部会对data数据进⾏序列化转为字符串,⽽’⾃动’转为的字符串并⾮后台需要的字符串，需要在被⾃动转为字符串前先⼿动转为字符串（即JSON.stringify(data)），已经是字符串了就不会被⾃动转为字符串，详见案例分析。
关于data-type简单说明⼀下："json"表⽰返回 JSON 数据；"text"表⽰返回纯⽂本字符串；"jsonp"表⽰JSONP 格式；"script"表⽰返回纯⽂本JavaScript 代码。
案例解析
在后端已确定采⽤json形式传递的前提下，当前端向后端传送如下图⼀所⽰包含对象数组的数据对象时，采⽤如下代码⼀中的代码进⾏请求，该请求并没有成功。其中代码⼀中将contentType设为 "application/json; charset=utf-8"。
图⼀
代码⼀：
$.ajax({
url: basePath + "/visitor/addVisitor",
data: resultObj,
plugin: false,
contentType: "application/json; charset=utf-8",
jquery源码在线success: function (data) {
$.toast({
message: "添加成功",
state: true
});
}
});
此时，查看浏览器中network，如下图⼆所⽰:
图⼆
显然请求没有成功，报了400的错误。
原因如下:
通过查看jquery源码，我们发现,ajax接收的数据最终都将转为字符串形式，如下是从jquery源码中截取的⼀段代码:
// Convert data if not already a string
if ( s.data && s.processData && typeof s.data !== "string" ) {
s.data = jQuery.param( s.data, s.traditional );
}
综上，解决执⾏代码⼀时出现的http请求为400的情况，需将data⾃⼰⼿动转为JSON字符串（JSON.stringify(data)），这样就⽆需⾛JQuery⾥⾯的param函数进⾏序列化转换了。也就是说避免出现图⼆箭头所⽰的错误情况，图⼆所⽰的情况是将接收的对象默认序列化为键值对的形式。
如下附上正确的代码：
$.ajax({
url: basePath + "/visitor/addVisitor",
data: JSON.stringify(resultObj),
plugin: false,
contentType: "application/json; charset=utf-8",
success: function (data) {
$.toast({
message: "添加成功",
state: true
});
}
});
总结
案例中,content-type是对的，是前后台协商⼀致的application/json，但是传输的数据data必须先进⾏JSON.stringify(data)，原因是前后端传送的必须是字符串，可以通过查看JQuery源码得知，如果data不是字符串,JQuery内部会将其进⾏序列化转为字符串,⽽序列化后的数据并⾮后端需要的，导致http状
态码为400的错误。
Ajax的属性配置均是基于对XmlhttpRequest对象的⽅法调⽤的封装。对其深⼊理解,⼀⽅⾯需要理解http协议的原理，另⼀⽅⾯需要参照xmlhttpRequest对象原理读懂jquery ajax源码。对ajax理解也有助于理解其他基于xmlhttpRequest对象封装的框架。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。