如何在通过POST AJAX请求提交时向表单添加数据

How to add data to a form when submitting via a POST AJAX request?

本文关键字：提交 表单 数据 添加 请求 AJAX POST      更新时间：2023-09-26

我使用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

我做错了什么?

正如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 }对转换为查询字符串。

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

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

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

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