是否有一种简单的单行方式来获取表单的数据,就像以经典的仅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;
});

当前回答

现在是2019年,有一个更好的方法:

const form = document.querySelector('form');
const data = new URLSearchParams(new FormData(form).entries());

或者如果你想要一个普通的对象

const form = document.querySelector('form');
const data = Object.fromEntries(new FormData(form).entries());

尽管请注意,这将不适用于重复的键,如您从多选和重复的复选框具有相同的名称。

其他回答

使用.serializeArray()获取数组格式的数据,然后将其转换为对象:

function getFormObj(formId) {
    var formObj = {};
    var inputs = $('#'+formId).serializeArray();
    $.each(inputs, function (i, input) {
        formObj[input.name] = input.value;
    });
    return formObj;
}

现在是2019年,有一个更好的方法:

const form = document.querySelector('form');
const data = new URLSearchParams(new FormData(form).entries());

或者如果你想要一个普通的对象

const form = document.querySelector('form');
const data = Object.fromEntries(new FormData(form).entries());

尽管请注意,这将不适用于重复的键,如您从多选和重复的复选框具有相同的名称。

你可以使用这个函数从表单中获取一个对象或JSON。

使用它:

var object = formService.getObjectFormFields(“#idform”);

function getObjectFormFields(formSelector) { /// <summary>Função que retorna objeto com base nas propriedades name dos elementos do formulário.</summary> /// <param name="formSelector" type="String">Seletor do formulário</param> var form = $(formSelector); var result = {}; var arrayAuxiliar = []; form.find(":input:text").each(function (index, element) { var name = $(element).attr('name'); var value = $(element).val(); result[name] = value; }); form.find(":input[type=hidden]").each(function (index, element) { var name = $(element).attr('name'); var value = $(element).val(); result[name] = value; }); form.find(":input:checked").each(function (index, element) { var name; var value; if ($(this).attr("type") == "radio") { name = $(element).attr('name'); value = $(element).val(); result[name] = value; } else if ($(this).attr("type") == "checkbox") { name = $(element).attr('name'); value = $(element).val(); if (result[name]) { if (Array.isArray(result[name])) { result[name].push(value); } else { var aux = result[name]; result[name] = []; result[name].push(aux); result[name].push(value); } } else { result[name] = []; result[name].push(value); } } }); form.find("select option:selected").each(function (index, element) { var name = $(element).parent().attr('name'); var value = $(element).val(); result[name] = value; }); arrayAuxiliar = []; form.find("checkbox:checked").each(function (index, element) { var name = $(element).attr('name'); var value = $(element).val(); result[name] = arrayAuxiliar.push(value); }); form.find("textarea").each(function (index, element) { var name = $(element).attr('name'); var value = $(element).val(); result[name] = value; }); return result; }

我有点惊讶,因为下面没有人提到解决方案。

通过document.forms.namedItem函数获取表单数据

var form = document.forms.namedItem("fileinfo");

form.addEventListener('submit', function(ev) {
   var oData = new FormData(form);
}

HT的

<form name="fileinfo">
  <label>Your email address:</label>
  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
  <label>Custom file label:</label>
  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
  <label>File to stash:</label>
  <input type="file" name="file" required />
  <input type="submit" value="Stash the file!" />
</form>
<div></div>
$("#form input, #form select, #form textarea").each(function() {
 data[theFieldName] = theFieldValue;
});

除此之外,你可能想看看serialize();