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()方法;这就是你的代码失败的原因。

而不是在serialize()返回的数组上使用serializeArray()，请致电jQuery.param();

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

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

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

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')

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

3 个答案: