如何通过POST AJAX请求提交数据到表单？

Question

我正在使用jQuery的$.ajax()函数来提交表单.我传递这样的表单数据:

data: form.serialize()

但是,我想在POST请求中添加其他数据.

根据这个答案,这样做的方法是serializeArray()在表单上使用,然后将数据推送到生成的对象数组.问题是当我尝试序列化结果数组时,jQuery会返回错误.

这是一个例子:

<form id="test">
    <input type="hidden" name="firstName" value="John">
    <input type="hidden" name="lastName" value="Doe">
</form>

JS:

console.log($("#test").serialize()); // firstName=John&lastName=Doe 

var data = $("#test").serializeArray();
console.log(data); // [Object, Object]

data.push({name: 'middleName', value: 'Bob'});
console.log(data); // [Object, Object, Object]

console.log(data.serialize()); // Uncaught TypeError: undefined is not a function 

的jsfiddle

我究竟做错了什么？

Answer 1

正如kapa所指出的,jQuery允许你直接将你得到的数组serializeArray()作为data参数传递,所以你的代码可以像下面那样简单;

var data = $("#test").serializeArray();

data.push({name: 'middleName', value: 'Bob'});

jQuery.ajax({
    data: data,
    // Other params
});

但是,要解释为什么你以前的代码不起作用(这里开始我以前的答案); serializeArray()字面上返回一个数组.数组没有serialize()方法; 这就是你的代码失败的原因.

而不是serialize()在返回的数组上使用serializeArray(),调用jQuery.param();

var data = $("#test").serializeArray();

data.push({name: 'middleName', value: 'Bob'});
console.log(jQuery.param(data));

jQuery.param()具体提供用于将{ name, value }生成的对serializeArray()转换为查询字符串.