如何使用 JavaScript/jQuery 获取表单数据？

IT技术 javascript jquery forms
2021-01-25 15:16:50

是否有一种简单的单行方式来获取表单数据，就像以经典的纯 HTML 方式提交一样？

例如：

<form>
    <input type="radio" name="foo" value="1" checked="checked" />
    <input type="radio" name="foo" value="0" />
    <input name="bar" value="xxx" />
    <select name="this">
        <option value="hi" selected="selected">Hi</option>
        <option value="ho">Ho</option>
</form>

输出：

{
    "foo": "1",
    "bar": "xxx",
    "this": "hi"
}

像这样的东西太简单了，因为它没有（正确地）包括文本区域、选择、单选按钮和复选框：

$("#form input").each(function () {
    data[theFieldName] = theFieldValue;
});
6个回答

使用$('form').serializeArray()，它返回一个数组：

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]

另一个选项是$('form').serialize()，它返回一个字符串：

"foo=1&bar=xxx&this=hi"

看看这个 jsfiddle 演示

@GetFree 为什么不直接使用 jQuery 地图功能？函数 getFormData(form) { var rawJson = form.serializeArray(); 无功模型 = {}; $.map(rawJson, function (n, i) { model[n['name']] = n['value']; }); 退货模式；}
2021-03-21 15:16:50
serializeArray 如果它返回一个带有键值对的对象会更有用
2021-03-28 15:16:50
请注意多个值的问题（如@Paul 上面提到的），复选框和多个输入name="multiple[]"不起作用。POST 方法的解决方案是一样的，只需使用 $('form').serialize()。此外，POST 方法不像大多数浏览器中的 GET 那样有 2000 个字符的限制，因此即使是非常大的数据也可以使用。
2021-03-31 15:16:50
还请注意，为了记录来自任何表单输入的值，输入必须具有name属性。
2021-03-31 15:16:50
我同意一个对象是理想的。但是，有一个问题——一个键可以有多个值。你会返回一个键 - “值数组”对象，还是键 - “第一个值”或其他东西？我认为 jQuery 人没有选择以上任何一个 :)
2021-04-04 15:16:50 
$('form').serialize() //this produces: "foo=1&bar=xxx&this=hi"

演示

关闭，但也许返回一个带有键值对的数组而不是单个字符串的东西？
2021-03-26 15:16:50
Nvm，在 serialize() 函数的注释中找到它。它被称为 serializeArray。它返回一个数组数组（其中包含一个条目“名称”和“值”），但这应该很容易转换。
2021-04-01 15:16:50
@BartvanHeukelom 我知道这是 4 年后，但 .serializeArray() 将返回一个数组。
2021-04-01 15:16:50
使用下划线库可以使用以下方法进行转换： _.object($("#myform").serializeArray().map(function(v) {return [v.name, v.value];} ))
2021-04-03 15:16:50

2014 年更新答案： HTML5 FormData执行此操作

var formData = new FormData(document.querySelector('form'))

然后，您可以完全按原样发布 formData - 它包含表单中使用的所有名称和值。

加上一个作为 FormData 是好的和有用的，但值得注意的是，如果你想读取 FormData 中的数据，它并不是那么容易（参见stackoverflow.com/questions/7752188/...）
2021-04-01 15:16:50

基于jQuery.serializeArray，返回键值对。

var data = $('#form').serializeArray().reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
}, {});
键值对在这里，伙计们，大家，来这里！它是金色的！！！谢谢！如果我想要一个名为“retailer”的元素的值，我会这样做 console.log($('#form').serializeArray().reduce(function(obj, item) { obj[item.name] = item.value; 返回对象;}, {} )['零售商']);
2021-03-30 15:16:50 
document.querySelector('form').addEventListener('submit', (e) => {
  const formData = new FormData(e.target);
  // Now you can use formData.get('foo'), for example.
  // Don't forget e.preventDefault() if you want to stop normal form .submission
});

这是一个挑剔的答案，但让我解释一下为什么这是一个更好的解决方案：

  • 我们正在正确处理表单提交而不是按钮按下。有些人喜欢在字段上按回车键。有些人使用替代输入设备，例如语音输入或其他辅助功能设备。处理表单提交，为大家正确解决。

  • 我们正在深入研究提交的实际表单的表单数据。如果您稍后更改表单选择器，则不必更改所有字段的选择器。此外，您可能有多个具有相同输入名称的表单。无需消除过多 ID 的歧义，只需根据提交的表单跟踪输入即可。如果适合您的情况，这也使您能够对多个表单使用单个事件处理程序。

  • FormData 接口相当新，但浏览器支持良好。这是构建数据集合以获取表单中内容的真实值的好方法。没有它，您将不得不遍历所有元素（例如 with form.elements）并找出检查的内容，未检查的内容，值是什么等。如果您需要旧的浏览器支持，则完全有可能，但 FormData界面更简单。

  • 我在这里使用 ES6 ......无论如何都不是必需的，因此如果您需要旧浏览器支持，请将其改回与 ES5 兼容。

其它你可能感兴趣的问题
上一篇如何使用jQuery检测键盘上的Enter键？ 下一篇navigator.geolocation.getCurrentPosition 有时有效有时无效