尝试使用 jQuery 来序列化 () 表单数据并使用 extend() 附加更多变量

Question

我正在使用$.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

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

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