用ajax模拟表单提交,遇到一个不解的问题

现在,有一个网页不是我做的,也不是简单的form表单。于是我用F12工具的Network分析了一下它的表单提交,其中有这么两个键值对:

图片描述

然后我就费解了。通常checkbox的提交,应该是类似这样吧:

tags[]: 7

tags[]: 128

于是我就试验。假设已经引入jQuery库。

$.post('url...', {
    ...
    tags: 7, tags: 128
    ...
}, function () {...});

测试发送,服务器只接收到到128,没有接收到7,好吧,也正常,毕竟同名的键,被覆盖了。

再试验:

$.post('url...', {
    ...
    tags: [7, 128]
    ...
}, function () {...});

测试发送,服务器报错,F12一看,键值对解析成了:

tags[]: 7

tags[]: 128

所以,到底怎样发送成这样子?

图片描述

阅读 5.1k
6 个回答

好吧,我猜一下题主可能碰到的情况。

首先,直接post一个对象是不可能的。

$.post('url', {
  tags: 7,
  tags: 128,
})

这种会被js解析字面量对象的时候覆盖掉同key的值的。

合理的解释我猜应该是在form表单中有两个同name名为'tag',然后在ajax提交的时候直接用serialize进行了序列化,最后直接ajax提交了。
所以才会出现两个字段同名的情况。

我建议题主看一下这个请求使用form表单提交的还是用ajax提交的。form中如果有同nameinput就会出现这种情况。
Jsbin Demo

$.post('url', {
  tags: 7,
  tags: 128,
})

我猜测,你用的是php?php的话。checkbox[]得这样写吧?

$.post('url...', {
    tags: [7, 128]
}
这样写才是正解

我理解你的问题是:为什么页面上可以,我不行?

简单的回答:因为你用的JQuery,他可能不是。

然后解释一下,你用JQuery提交数据,是JQuery帮你做了数据的序列化之类的工作,所以你就得按照JQuery的方式来提交。但,如果自己用底层的接口来发送提交数据,那么:你想数据写成什么样,就可以写成什么样。最后的问题只是如果你随意发送数据,服务器端是否能正常处理罢了。

同意sfrog

jquery下你可以这样

var str='tags=7&tags=128';
$.ajax({
    type:"post",
    url:"http://localhost/",//地址自己改
    data:str,
    async:true
});

不要在意这个405

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
1 篇内容引用
推荐问题
宣传栏