尝试使用 jQuery 来序列化（）表单数据并使用扩展（）附加更多变量答案

【问题标题】：Trying to use jQuery to serialize() form data and append more variables with extend()尝试使用 jQuery 来序列化（）表单数据并使用扩展（）附加更多变量
【发布时间】：2012-06-11 20:04:00
【问题描述】：

我正在使用$.ajax 提交表单，但我想在提交中添加一些不属于表单输入的键值对。连接这些额外参数的技术效果很好，但似乎不如使用$.extend 优雅。问题是我无法让后者工作。

这行得通：

var data = $form.serialize() + "&a=1&b=0.5";

这不是：

var data = $.extend({}, $form.serialize(), {
    a: 1,
    b: 0.5
});

当我检查提交的内容时，我可以看到我有三个键值对：

t:test
a:1
b:0.5

其中t 是单个表单输入字段（文本框）的名称。

当我使用$.extend 函数时，检查显示以下内容：

0:t
1:=
2:t
3:e
4:s
5:t
a:1
b:0.5

我的应用程序不喜欢这个请求。这种行为是意料之中的还是有人可以指出我做错了什么？

【问题讨论】：

var data = $.extend($form.serialize(), { a: 1, b: 0.5 }); 能为您做什么？
我以为.serialize 总是返回一个字符串
@Mark Schultheiss：这似乎忽略了表格中的任何内容，因此实际上只有a 和b 在发布请求中，没有其他内容。我尝试交换它们，但结果与我的问题中描述的相同。
我认为这是因为 extend 需要一个对象而不是字符串，因此它为字符串数组中的每个“对象”创建一个对象，从而扩展您原来的空对象{}
答案：jblotus.com/2011/07/12/… 和 stackoverflow.com/questions/6221939/…

标签： jquery form-submit

【解决方案1】：

您的问题是因为 .serialize() 仅适用于 jQuery 表单对象，并且在 .extend() 内序列化将获得 [object] [object] 作为表单的值（因为这不是正确的做法。我提出两种解决方案：

第一个解决方案 克隆 jQuery 的表单，向其中添加项目并序列化

var $form = $('#form').clone()
          .append('<input name="foo" value="1" />')
          .append('<input name="bar" value="2" />')
          .serialize();

第二个解决方案 用表单的值填充一个对象，然后参数化

var data = $(foo:"value1", bar:"value2");
$('form').find(':input').each(function () {
    if (this.name) {
        data[this.name] = this.value;
    }
});

data = $.param(data)

【讨论】：