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

当前回答

$('form').serialize() //this produces: "foo=1&bar=xxx&this=hi"

demo

其他回答

$("#form input, #form select, #form textarea").each(function() {
 data[theFieldName] = theFieldValue;
});

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

你可以使用这个函数从表单中获取一个对象或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; }

这个方法应该可以做到。它序列化表单数据,然后将它们转换为对象。还可以处理复选框组。

function getFormObj(formId) {
  var formParams = {};
  $('#' + formId)
    .serializeArray()
    .forEach(function(item) {
      if (formParams[item.name]) {
        formParams[item.name] = [formParams[item.name]];
        formParams[item.name].push(item.value)
      } else {
        formParams[item.name] = item.value
      }
    });
  return formParams;
}
$(form).serializeArray().reduce(function (obj, item) {
      if (obj[item.name]) {
           if ($.isArray(obj[item.name])) {
               obj[item.name].push(item.value);
           } else {
                var previousValue = obj[item.name];
                obj[item.name] = [previousValue, item.value];
           }
      } else {
           obj[item.name] = item.value;
      }

     return obj;
}, {});

它将修复问题:无法与多选择工作。

你们都不完全正确。你不能写:

formObj[input.name] = input.value;

因为这样,如果你有一个多选列表,它的值将被最后一个覆盖,因为它被传输为:"param1": "value1", "param1": "value2"。

所以,正确的方法是:

if (formData[input.name] === undefined) {
    formData[input.name] = input.value;
}
else {
    var inputFieldArray = $.merge([], $.isArray(formData[input.name]) ? formData[input.name] : [formData[input.name]]);
    $.merge(inputFieldArray, [input.value]);
    formData[input.name] = $.merge([], inputFieldArray);
}