前言
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?keyaiqinhaijiangmofeng 这是get , 而 post 请求则是使用请求体参数不在 url 中在请求体中的参数表现形式也是: keyaiqinhaijiangmofeng的形式。下面列举几个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 {authoraiqinhai,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使用的一些小细节。对于这些基础知识也需要重视否则迟早会被这些微不足道的小家伙绊倒。