使用ajax提交时获取表单的键值对[重复]答案

【问题标题】：Get a form's key value pairs when submitting with ajax [duplicate]使用ajax提交时获取表单的键值对[重复]
【发布时间】：2014-07-09 20:00:37
【问题描述】：

提交表单后，我将阻止默认操作，而是使用 POST 数据进行 ajax 调用。如何获取所有数据，以便将其与我的 ajax 调用一起传递？

当一个表单元素通过post方法正常提交时，它很容易将表单中所有的name => value对组合起来。不幸的是，现在我正在做 ajax，看来我需要自己组装它。我真的不想编写 JS 来遍历表单并构造我自己的哈希，我假设 jQuery 或某些我没有想到的行为有更简单的方法。

我需要所有值的表单的 JS 小提琴示例。 http://jsfiddle.net/rm9KD/

【问题讨论】：

通常 $(form).serialize();成功了。它以查询字符串的形式返回表单数据，您可以将其发布到服务器。
是的，刚刚发现 - 非常有用。谢谢格雷格！

标签： javascript jquery ajax forms

【解决方案1】：

使用 jQuery serialize()

$.ajax({ 
        url: url,
        data: $("form").serialize()
    }
);

由于您没有提供具体代码，这只是一个示例供您填写

【讨论】：

反对者：请解释一下你会做什么？
不是我，但是...我会投票关闭
@Kevin B：已经关闭 :) 不知道为什么会投反对票。简单的问题。简单的回答。去图:)

【解决方案2】：

jQuery 提供了一个serializeArray 函数，它将表单数据序列化为一个数组。然后，您可以取出结果数组并从中创建一个数据对象。

var arrayData = $('#myForm').serializeArray(), 
    data = {}, 
    i = 0;
for(; i < arrayData.length; i++) {
    data[arrayData[i].name] = arrayData[i].value;
}

或者，jQuery 提供 serialize 函数，该函数提供表单数据的序列化字符串。

var data = $('#myForm').serialize();

【讨论】：

为什么用 serializeArray() 而不是 serialize()？是否可以只在 ajax 的数据字段中使用来自 serialize() 的字符串？
@DonnyP 也可以使用serialize，但是如果您想在提交数据之前对其进行操作，serialize 会使操作变得更加困难，因为它是一个字符串值而不是一个对象。
请否决者评论我如何改进这个答案？这是一个完全可行的答案，因为它提供了两种不同的方式来完成 OP 的要求。
显然有人今天心情不好。对我也一样。哦，好吧:)
@TrueBlueAussie 是的。我投票赞成你的答案，因为我认为它也不值得投反对票。人们只是倾向于不阅读。

【解决方案3】：

http://jsfiddle.net/WfrM4/

$(document).ready(function () {
    $('form').submit(function (e) {
        // Dont trigger a page load on submit.
        e.preventDefault();

        // Get all the values of the form???
        var form_data = $('form[name="my_awesome_form"]').serialize()

        // Make an ajax call
        $.ajax({

            url: "/ajax_form_receiver",
            data: form_data
        });
    });
});

【讨论】：

如果我可以提出一个改进这一点的建议：您已经将其绑定到表单 submit 事件。您可以使用$(this) 而不是$('form[name="my_awesome_form"]')。当您已经拥有所需内容的引用时，无需遍历 DOM。