通过 POST AJAX 请求提交时如何向表单添加数据？ [复制]

Question

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

data: form.serialize()

但是，我想向 POST 请求添加其他数据。

根据this answer，这样做的方法是在表单上使用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() 方法；这就是您的代码失败的原因。

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

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

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

jQuery.param()专门用于将serializeArray()生成的{ name, value }对转换为查询字符串。

Answer 2

serialize 是一个用于序列化表单对象的 jquery 方法。一旦你调用serialize，你就不再有一个 jquery 对象，因此你不能序列化它。您应该能够通过使用 JSON 对象对其进行字符串化，将您的 JSON 对象传递给 $.ajax：

$.ajax({
   data: JSON.stringify(data)
   //...
});

Answer 3

除了其他答案之外，有时在序列化之前简单地添加隐藏的输入元素会更容易。

$('<input type=hidden>').attr({name:'middleName',value:'bob'}).appendTo('form#test')