jquery.ajax post提交一个对象
打印出req.body,结果是这样的
请问这是什么原因?用form表单同步提交是可以正常解析的
光阴似箭催人老,日月如移越少年。
jQuery.ajax send 数据的时候默认 contentType 是 application/x-www-form-urlencoded
jQuery.ajax
contentType
application/x-www-form-urlencoded
application/x-www-form-urlencoded 标准要求如下
name和value都必须escaped,空格使用+代替
name
value
escaped
空格
+
按照文档中的顺序 以names/values (键值对)形式 提交,每一组数据以&分割
names/values
link: https://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.1
info[name]=hury&info[age]=40
楼主提问的数据,post.body内容如上,解析是完全正确的,键值对只有一级,且所有键都是平等的,不存在子元素等。
post.body
键值对
键
如果希望提交的数据直接解析成对象,可以参考其他的答案,body-parser formidable等组件解析。
body-parser
formidable
常用的contentType 还有
multipart/form-data 上传文件
multipart/form-data
text/plain 原生数据没有经过处理,可以自定义解析方式
text/plain
你使用express的时候,是不是没有安装并启用body-parser这个中间件呀?
post的数据是键值对的形式的。你可以把数据弄成字符串的形式传过去。
post
可改写为:
var data = { info: { name: 'john', age: 10 } }; $.ajax({ url: 'test', type: 'post', dataType: 'text', data: { data: JSON.stringify(data) } });
后端:
.post('/test', function(req, res) { console.log(JSON.parse(req.body.data)); });
为什么不用更好用的 Nokitjs ? http://nokit.org ;-D
各位,我看了下bodyParser官方的解释:bodyParser.urlencoded的参数 extended,如果为 true (默认),则使用第三方插件 qs 来解析内容,如果为 false 则使用node内建对象 querystring 来解析内容。
extended
qs
querystring
区别就在这里了:querystring 并不支持解析复杂对象(多级嵌套),比如说 'data[name]=henry&data[age]=10' 是不被支持的,它支持 name=henry&age=10 的这种query格式。qs 则是在querystring的基础进行了封装,实现了对复杂对象的解析,如 qs.parse('data[name]=henry&data[age]=10') 可以得出 { data: { name: 'henry', age: 10 } }
'data[name]=henry&data[age]=10'
name=henry&age=10
qs.parse('data[name]=henry&data[age]=10')
{ data: { name: 'henry', age: 10 } }
至于为什么form表单直接提交和ajax提交结果不一样,原因是:form提交一个多选项,传输的格式是这样的 hobby=sport&hobby=coding 而使用jquery.ajax post提交 {hobby: ['sport', 'coding']},传输的格式是这样的 hobby[0]=sport&hobby[1]=coding,所以就造成了解析的错误。至于为什么jquery没有把对象转换成我们想要的query形式,暂时还不太清楚原因。
hobby=sport&hobby=coding
{hobby: ['sport', 'coding']}
hobby[0]=sport&hobby[1]=coding
qs 在使用时有很多限制,比如嵌套的层数、list的长度等等,express生成器默认给该中间件配置 extended: false,也许就是出于性能考虑。
extended: false
最后,解决办法:方法一:将jquery.ajax的contentType参数设置为'application/json',并对传输的数据进行转换方法二:配置中间件borderParser.urlencoded({ extended: true })
'application/json'
true
最最后,感觉各位大神的帮忙,感谢 nealnote
data格式有问题
jQuery.ajax
send 数据的时候默认contentType
是application/x-www-form-urlencoded
application/x-www-form-urlencoded
标准要求如下name
和value
都必须escaped
,空格
使用+
代替按照文档中的顺序 以
names/values
(键值对)形式 提交,每一组数据以&分割link: https://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.1
楼主提问的数据,
post.body
内容如上,解析是完全正确的,键值对
只有一级,且所有键
都是平等的,不存在子元素等。如果希望提交的数据直接解析成对象,可以参考其他的答案,
body-parser
formidable
等组件解析。常用的
contentType
还有multipart/form-data
上传文件text/plain
原生数据没有经过处理,可以自定义解析方式你使用express的时候,是不是没有安装并启用
body-parser
这个中间件呀?post
的数据是键值对的形式的。你可以把数据弄成字符串的形式传过去。可改写为:
后端:
为什么不用更好用的 Nokitjs ? http://nokit.org ;-D
各位,我看了下bodyParser官方的解释:
bodyParser.urlencoded的参数
extended
,如果为 true (默认),则使用第三方插件qs
来解析内容,如果为 false 则使用node内建对象querystring
来解析内容。区别就在这里了:
querystring
并不支持解析复杂对象(多级嵌套),比如说'data[name]=henry&data[age]=10'
是不被支持的,它支持name=henry&age=10
的这种query格式。qs
则是在querystring的基础进行了封装,实现了对复杂对象的解析,如qs.parse('data[name]=henry&data[age]=10')
可以得出{ data: { name: 'henry', age: 10 } }
至于为什么form表单直接提交和ajax提交结果不一样,原因是:
form提交一个多选项,传输的格式是这样的
hobby=sport&hobby=coding
而使用jquery.ajax post提交{hobby: ['sport', 'coding']}
,传输的格式是这样的hobby[0]=sport&hobby[1]=coding
,所以就造成了解析的错误。至于为什么jquery没有把对象转换成我们想要的query形式,暂时还不太清楚原因。qs
在使用时有很多限制,比如嵌套的层数、list的长度等等,express生成器默认给该中间件配置extended: false
,也许就是出于性能考虑。最后,解决办法:
方法一:将jquery.ajax的contentType参数设置为
'application/json'
,并对传输的数据进行转换方法二:配置中间件borderParser.urlencoded({ extended:
true
})最最后,感觉各位大神的帮忙,感谢 nealnote
data格式有问题