聊聊ajax中contentType

青旅半醒 2021-09-25 00:18 496阅读 0赞

# 前言 #

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上面出现问题。***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"，这时候，数据是以键值对的形式传递到后端

$.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)
        }
    })

添加 contentType:"application/json"，这时候，数据是以json串的形式传递到后端

$.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使用的一些小细节。对于这些基础知识也需要重视，否则迟早会被这些微不足道的小家伙绊倒。

转载于：[https://blog.csdn.net/qq\_28165595/article/details/84921294?utm\_medium=distribute.pc\_relevant.none-task-blog-BlogCommendFromBaidu-2.control&depth\_1-utm\_source=distribute.pc\_relevant.none-task-blog-BlogCommendFromBaidu-2.control][https_blog.csdn.net_qq_28165595_article_details_84921294_utm_medium_distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control]

[https_blog.csdn.net_qq_28165595_article_details_84921294_utm_medium_distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control]: https://blog.csdn.net/qq_28165595/article/details/84921294?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control