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

Question

现在，有一个网页不是我做的，也不是简单的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

所以，到底怎样发送成这样子？

Answer 1

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

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

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

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

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

Answer 2

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

Answer 3

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

Answer 4

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

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

Answer 5

我理解你的问题是：为什么页面上可以，我不行？

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

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

Answer 6

同意sfrog

jquery下你可以这样

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