我用这个:

jQuery插件

(function($){
  $.fn.getFormData = function(){
    var data = {};
    var dataArray = $(this).serializeArray();
    for(var i=0;i<dataArray.length;i++){
      data[dataArray[i].name] = dataArray[i].value;
    }
    return data;
  }
})(jQuery);

HTML表单

<form id='myform'>
  <input name='myVar1' />
  <input name='myVar2' />
</form>

获取数据

var myData = $("#myForm").getFormData();

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

demo

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

最简单的方法是2022年。

document.querySelector('form').addEventListener('submit', (e) => {
  const data = Object.fromEntries(new FormData(e.target).entries());
  console.log(data)
});

输出

{ name: 'Stackoverflow' }

这将把所有表单字段附加到JavaScript对象“res”:

var res = {};
$("#form input, #form select, #form textarea").each(function(i, obj) {
    res[obj.name] = $(obj).val();
})

这是一个很好的香草JS函数，我写来提取表单数据作为一个对象。它还具有向对象中插入附加内容和清除表单输入字段的选项。

const extractFormData = ({ form, clear, add }) => {
  return [].slice.call(form.children).filter(node => node.nodeName === 'INPUT')
  .reduce((formData, input) => {
    const value = input.value
    if (clear) { input.value = '' }
    return {
      ...formData,
      [input.name]: value
    }
  }, add)
}

下面是一个使用post请求的例子:

submitGrudge(e) {
  e.preventDefault()

  const form = e.target
  const add = { id: Date.now(), forgiven: false }
  const grudge = extractFormData({ form, add, clear: true })

  // grudge = {
  //  "name": "Example name",
  //  "offense": "Example string",
  //  "date": "2017-02-16",
  //  "id": 1487877281983,
  //  "forgiven": false
  // }

  fetch('http://localhost:3001/api/grudge', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(grudge)
  })
    .then(response => response.json())
    .then(grudges => this.setState({ grudges }))
    .catch(err => console.log('error: ', err))
}