前言

contentType属性，想必大家在日常开发中经常用到，但是大家可能对于contentType了解的不是很透彻，这里来和大家一起总结下。

contentType是干嘛滴

contentType 主要设置你发送给服务器的格式，服务端根据前端设置的contentType 来解析前端的数据。关于http请求中的一些小知识点可以大致总结如下（巩固基础）

（1）、HTTP 协议是以 ASCII 码 传输，建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分：状态行、请求头、消息主体。
（2）、协议规定 POST 提交的数据必须放在消息主体（entity-body）中，但协议并没有规定数据必须使用什么编码方式。实际上，开发者完全可以自己决定消息主体的格式，只要最后发送的 HTTP 请求满足上面的格式就可以。
（3）、数据发送出去，还要服务端解析成功才有意义。一般服务端语言如 java、python 等，以及它们的 framework，都内置了自动解析常见数据格式的功能。服务端通常是根据请求头（headers）中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。

在ajax中使用contentType

之前在使用ajax的时候，服务端老是获取不到数据前端传过来的数据。但不是name对应不上，后面检查还是在contentType上面出现问题。

$.ajax contentType 和 dataType , contentType 主要设置你发送给服务器的格式，dataType设置你收到服务器数据的格式。在 jquery 的 ajax 中， contentType默认值是：application/x-www-form-urlencoded，这种格式的特点就是，name/value 成为一组，每组之间用 & 联接，而 name与value 则是使用 = 连接。如： www.baidu.com/q?key=aiqinhai&value=jiangmofeng 这是get , 而 post 请求则是使用请求体，参数不在 url 中，在请求体中的参数表现形式也是: key=aiqinhai&value=jiangmofeng的形式。下面列举几个ajax中contentType 使用情况

不添加 contentType:"application/json"的时候可以向后台发送json对象形式(也就是contentType以默认值的时候)

$.ajax({
    type: "post",
    url:  "notice/addMessageInfo",
    data:{name:'aiqinhai',age:'18'},
    dataType: "json",
    success: function(data) {
        console.log(data);
    },
    error: function(msg) {
        console.log(msg)
    }
})

这时候，数据是以键值对的形式传递到后端，服务端也会自动解析不用做处理。

$.ajax({
    type: "post",
    url:  "notice/addMessageInfo",
    contentType: "application/json",
    data:"{'name':'aiqinhai','age':'18'}",
    dataType: "json",
    success: function(data) {
        console.log(data);
    },
    error: function(msg) {
        console.log(msg)
    }
})

注意看这时候的data数据和上面没有设置contentType:"application/json"的data数据的区别，前面是data:{name:'aiqinhai',age:'18'}。而下面的是data:"{'name':'aiqinhai','age':'18'}"。也就是前面传递的数据是json对象，而后面传递的数据是json字符串。对于json字符串我们可以调用JSON.stringify({name:'aiqinhai',age:'18'})来将json对象转换为json字符串。然后在服务端再对json字符串进行解析处理。例如springmvc中的@RequestBody就可以前端的json字符串。

重点：如果设置了contentType:"application/json"，但是你的data还是传递的{name:'aiqinhai',age:'18'}，这时候后端是获取不到值，这也就是我之前为啥在后端获取不到值的原因。

一般情况下我们直接使用ajax中默认的contentType就够了，那在什么情况下，我们需要设置contentType呢？我们可以看到前面的data数据是比较简单的json对象，如果我们传递的是比较复杂的数据，例如多层嵌套数据。这时候就需要设置contentType:"application/json"了。例如

var data = {
    author：'aiqinhai',
    messageInfo: {
        messageTitle: messageTitle,
        messageContent: messageContent,
        publisher: publisher
    }
}

$.ajax({  
    type: 'post',
    url: "notice/addMessageInfo",
    contentType: 'application/json',
    data: JSON.stringify(data),
    dataType: "json",
    success: function(data) {
        console.log(data);
    },
    error: function(msg) {
        console.log(msg)
    }
})

总结

上面介绍了ajax中contentType使用的一些小细节。对于这些基础知识也需要重视，否则迟早会被这些微不足道的小家伙绊倒。

扫描二维码关注公众号，回复： 4797702 查看本文章

聊聊ajax中contentType

前言

contentType是干嘛滴

在ajax中使用contentType

总结

猜你喜欢