Làm cách nào để có được dữ liệu biểu mẫu với JavaScript / jQuery?

Có cách nào đơn giản, một dòng để lấy dữ liệu của biểu mẫu như nếu nó được gửi theo cách chỉ HTML cổ điển không?

Ví dụ:

<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>

Đầu ra:

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

Một cái gì đó như thế này là quá đơn giản, vì nó không (chính xác) bao gồm textareas, chọn, nút radio và hộp kiểm:

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

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

bản giới thiệu

Sử dụng $('form').serializeArray(), trả về một mảng :

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

Tùy chọn khác là $('form').serialize(), trả về một chuỗi :

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

Hãy xem bản demo jsfiddle này

Câu trả lời được cập nhật cho năm 2014: HTML5 FormData thực hiện điều này

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

Sau đó, bạn có thể đăng formData chính xác như nó vốn có - nó chứa tất cả các tên và giá trị được sử dụng trong biểu mẫu.

Dựa trên jQuery.serializeArray, trả về các cặp khóa-giá trị.

var data = $('#form').serializeArray().reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
}, {});

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
});

Đây là một câu trả lời khó chịu, nhưng hãy để tôi giải thích tại sao đây là một giải pháp tốt hơn:

• Chúng tôi đang xử lý đúng cách gửi biểu mẫu thay vì nhấn nút. Một số người thích đẩy vào trên các lĩnh vực. Một số người sử dụng các thiết bị đầu vào thay thế như đầu vào giọng nói hoặc các thiết bị trợ năng khác. Xử lý biểu mẫu gửi và bạn giải quyết chính xác cho mọi người.

• Chúng tôi đang đào sâu vào dữ liệu biểu mẫu cho biểu mẫu thực tế đã được gửi. Nếu bạn thay đổi bộ chọn biểu mẫu của mình sau này, bạn không phải thay đổi bộ chọn cho tất cả các trường. Hơn nữa, bạn có thể có một số biểu mẫu có cùng tên đầu vào. Không cần phải định hướng với ID quá mức và những gì không, chỉ cần theo dõi các đầu vào dựa trên biểu mẫu đã được gửi. Điều này cũng cho phép bạn sử dụng một trình xử lý sự kiện duy nhất cho nhiều biểu mẫu nếu phù hợp với tình huống của bạn.

• Giao diện FormData khá mới, nhưng được các trình duyệt hỗ trợ tốt. Đó là một cách tuyệt vời để xây dựng bộ sưu tập dữ liệu đó để có được các giá trị thực của những gì trong biểu mẫu. Nếu không có nó, bạn sẽ phải lặp qua tất cả các yếu tố (chẳng hạn như với form.elements) và tìm hiểu xem cái gì đã được kiểm tra, cái gì không, giá trị là gì, v.v ... Hoàn toàn có thể nếu bạn cần hỗ trợ trình duyệt cũ, nhưng FormData Giao diện đơn giản hơn.

• Tôi đang sử dụng ES6 ở đây ... không phải là một yêu cầu bằng bất kỳ phương tiện nào, vì vậy hãy thay đổi nó trở lại để tương thích ES5 nếu bạn cần hỗ trợ trình duyệt cũ.

sử dụng .serializeArray () để lấy dữ liệu ở định dạng mảng và sau đó chuyển đổi nó thành một đối tượng:

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

Đây là một soluton thực sự đơn giản và ngắn mà thậm chí không cần Jquery.

var formElements=document.getElementById("myForm").elements;    
var postData={};
for (var i=0; i<formElements.length; i++)
    if (formElements[i].type!="submit")//we dont want to include the submit-buttom
        postData[formElements[i].name]=formElements[i].value;

Đó là năm 2019 và có một cách tốt hơn để làm điều này:

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

hoặc nếu bạn muốn một đối tượng đơn giản thay thế

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

mặc dù lưu ý rằng điều này sẽ không hoạt động với các khóa trùng lặp như bạn nhận được từ các hộp kiểm đa lựa chọn và trùng lặp có cùng tên.

$('#myform').serialize();

Tôi sử dụng cái này:

Plugin 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);

Biểu mẫu HTML

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

Lấy dữ liệu

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

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

ngoài ra, bạn có thể muốn xem serialize () ;

Đây là một triển khai JavaScript chỉ hoạt động để xử lý chính xác các hộp kiểm, nút radio và thanh trượt (có thể là các loại đầu vào khác, nhưng tôi chỉ thử nghiệm các loại này).

function setOrPush(target, val) {
    var result = val;
    if (target) {
        result = [target];
        result.push(val);
    }
    return result;
}

function getFormResults(formElement) {
    var formElements = formElement.elements;
    var formParams = {};
    var i = 0;
    var elem = null;
    for (i = 0; i < formElements.length; i += 1) {
        elem = formElements[i];
        switch (elem.type) {
            case 'submit':
                break;
            case 'radio':
                if (elem.checked) {
                    formParams[elem.name] = elem.value;
                }
                break;
            case 'checkbox':
                if (elem.checked) {
                    formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
                }
                break;
            default:
                formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
        }
    }
    return formParams;
}

Ví dụ làm việc:

    function setOrPush(target, val) {
      var result = val;
      if (target) {
        result = [target];
        result.push(val);
      }
      return result;
    }

    function getFormResults(formElement) {
      var formElements = formElement.elements;
      var formParams = {};
      var i = 0;
      var elem = null;
      for (i = 0; i < formElements.length; i += 1) {
        elem = formElements[i];
        switch (elem.type) {
          case 'submit':
            break;
          case 'radio':
            if (elem.checked) {
              formParams[elem.name] = elem.value;
            }
            break;
          case 'checkbox':
            if (elem.checked) {
              formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
            }
            break;
          default:
            formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
        }
      }
      return formParams;
    }

    //
    // Boilerplate for running the snippet/form
    //

    function ok() {
      var params = getFormResults(document.getElementById('main_form'));
      document.getElementById('results_wrapper').innerHTML = JSON.stringify(params, null, ' ');
    }

    (function() {
      var main_form = document.getElementById('main_form');
      main_form.addEventListener('submit', function(event) {
        event.preventDefault();
        ok();
      }, false);
    })();

<form id="main_form">
  <div id="questions_wrapper">
    <p>what is a?</p>
    <div>
      <input type="radio" required="" name="q_0" value="a" id="a_0">
      <label for="a_0">a</label>
      <input type="radio" required="" name="q_0" value="b" id="a_1">
      <label for="a_1">b</label>
      <input type="radio" required="" name="q_0" value="c" id="a_2">
      <label for="a_2">c</label>
      <input type="radio" required="" name="q_0" value="d" id="a_3">
      <label for="a_3">d</label>
    </div>
    <div class="question range">
      <label for="a_13">A?</label>
      <input type="range" required="" name="q_3" id="a_13" min="0" max="10" step="1" list="q_3_dl">
      <datalist id="q_3_dl">
        <option value="0"></option>
        <option value="1"></option>
        <option value="2"></option>
        <option value="3"></option>
        <option value="4"></option>
        <option value="5"></option>
        <option value="6"></option>
        <option value="7"></option>
        <option value="8"></option>
        <option value="9"></option>
        <option value="10"></option>
      </datalist>
    </div>
    <p>A and/or B?</p>
    <div>
      <input type="checkbox" name="q_4" value="A" id="a_14">
      <label for="a_14">A</label>
      <input type="checkbox" name="q_4" value="B" id="a_15">
      <label for="a_15">B</label>
    </div>
  </div>
  <button id="btn" type="submit">OK</button>
</form>
<div id="results_wrapper"></div>

biên tập:

Nếu bạn đang tìm kiếm một triển khai đầy đủ hơn, thì hãy xem phần này của dự án tôi đã thực hiện . Cuối cùng tôi sẽ cập nhật câu hỏi này với giải pháp hoàn chỉnh mà tôi đã đưa ra, nhưng có lẽ điều này sẽ hữu ích cho ai đó.

Nếu bạn đang sử dụng jQuery, đây là một chức năng nhỏ sẽ làm những gì bạn đang tìm kiếm.

Đầu tiên, thêm ID vào biểu mẫu của bạn (trừ khi đó là biểu mẫu duy nhất trên trang, sau đó bạn chỉ có thể sử dụng 'biểu mẫu' làm truy vấn dom)

<form id="some-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>

<script>
//read in a form's data and convert it to a key:value object
function getFormData(dom_query){
    var out = {};
    var s_data = $(dom_query).serializeArray();
    //transform into simple data/value object
    for(var i = 0; i<s_data.length; i++){
        var record = s_data[i];
        out[record.name] = record.value;
    }
    return out;
}

console.log(getFormData('#some-form'));
</script>

Đầu ra sẽ như sau:

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

Bạn cũng có thể sử dụng các Đối tượng FormData ; Đối tượng FormData cho phép bạn biên dịch một tập hợp các cặp khóa / giá trị để gửi bằng XMLHttpRequest. Nó chủ yếu được sử dụng để gửi dữ liệu biểu mẫu, nhưng có thể được sử dụng độc lập với các biểu mẫu để truyền dữ liệu có khóa.

        var formElement = document.getElementById("myform_id");
        var formData = new FormData(formElement);
        console.log(formData);

Điều này sẽ nối tất cả các trường biểu mẫu vào đối tượng JavaScript "res":

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

Tôi đã bao gồm câu trả lời để cũng trả lại đối tượng cần thiết.

function getFormData(form) {
var rawJson = form.serializeArray();
var model = {};

$.map(rawJson, function (n, i) {
    model[n['name']] = n['value'];
});

return model;
}

Dựa trên phản ứng của neuront, tôi đã tạo một phương thức JQuery đơn giản để lấy dữ liệu biểu mẫu theo cặp giá trị khóa nhưng nó hoạt động cho nhiều lựa chọn và cho các đầu vào mảng với name = 'example []'.

Đây là cách nó được sử dụng:

var form_data = $("#form").getFormObject();

Bạn có thể tìm thấy một ví dụ dưới đây về định nghĩa của nó và cách nó hoạt động.

// Function start
$.fn.getFormObject = function() {
    var object = $(this).serializeArray().reduce(function(obj, item) {
        var name = item.name.replace("[]", "");
        if ( typeof obj[name] !== "undefined" ) {
            if ( !Array.isArray(obj[name]) ) {
                obj[name] = [ obj[name], item.value ];
            } else {
               obj[name].push(item.value);
            }
        } else {
            obj[name] = item.value;
        }
        return obj;
    }, {});
    return object;
}
// Function ends

// This is how it's used
$("#getObject").click( function() {
  var form_data = $("#form").getFormObject();
  console.log(form_data);
});

/* Only to make view better ;) */
#getObject {
  padding: 10px;
  cursor:pointer;
  background:#0098EE;
  color:white;
  display:inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form id="form">
  <input type="text" name="text" value="Hola amigo" /> 
  
  <input type="text" name="text_array[]" value="Array 1" /> 
  <input type="text" name="text_array[]" value="Array 2" /> 
  <input type="text" name="text_array[]" value="Array 3" /> 
  
  <select name="multiselect" multiple>
    <option name="option1" selected> option 1 </option>
    <option name="option2" selected> option 2 </option>
  </select>
  
  <input type="checkbox" name="checkbox" value="checkbox1" checked/>
  <input type="checkbox" name="checkbox" value="checkbox2" checked/>
  
  <input type="radio" name="radio" value="radio1" checked/>
  <input type="radio" name="radio" value="radio2"/>

</form>

<div id="getObject"> Get object (check the console!) </div>

var formData = new FormData($('#form-id'));
params   = $('#form-id').serializeArray();

$.each(params, function(i, val) {
    formData.append(val.name, val.value);
});

function getFormData($form){
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};

    $.map(unindexed_array, function(n, i){
        if(indexed_array[n['name']] == undefined){
            indexed_array[n['name']] = [n['value']];
        }else{
            indexed_array[n['name']].push(n['value']);
        }
    });

    return indexed_array;
}

bạn có thể sử dụng chức năng này để có một đối tượng hoặc JSON từ biểu mẫu.

để sử dụng nó:

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;
        }

Tôi đã viết một thư viện để giải quyết vấn đề này: JSONForms . Nó có một biểu mẫu, đi qua từng đầu vào và xây dựng một đối tượng JSON mà bạn có thể dễ dàng đọc.

Giả sử bạn có dạng sau:

<form enctype='application/json'>
  <input name='places[0][city]' value='New York City'>
  <input type='number' name='places[0][population]' value='8175133'>
  <input name='places[1][city]' value='Los Angeles'>
  <input type='number' name='places[1][population]' value='3792621'>
  <input name='places[2][city]' value='Chicago'>
  <input type='number' name='places[2][population]' value='2695598'>
</form>

Truyền biểu mẫu cho phương thức mã hóa của JSONForms trả về cho bạn đối tượng sau:

{
  "places": [
    {
      "city": "New York City",
      "population": 8175133
    },
    {
      "city": "Los Angeles",
      "population": 3792621
    },
    {
      "city": "Chicago",
      "population": 2695598
    }
  ]
}

Đây là bản demo với mẫu của bạn.

$( "form" ).bind( "submit", function(e) {
    e.preventDefault();
    
    console.log(  $(this).serializeObject() );    

    //console.log(  $(this).serialize() );
    //console.log(  $(this).serializeArray() );

});


$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();

    $.each( a, function() {
        if ( o[this.name] !== undefined) 
        {
            if ( ! o[this.name].push ) 
            {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        }
        else 
        {
            o[this.name] = this.value || '';
        }
    });

    return o;
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<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>
    </select>

    <input type="submit" value="Submit" />

</form>

Codepen

Đối với những người bạn thích một Objectchuỗi trái ngược với chuỗi nối tiếp (như chuỗi được trả về $(form).serialize()và cải thiện một chút $(form).serializeArray()), vui lòng sử dụng mã bên dưới:

var Form = {
    _form: null,
    _validate: function(){
        if(!this._form || this._form.tagName.toLowerCase() !== "form") return false;
        if(!this._form.elements.length) return false;
    }, _loopFields: function(callback){
        var elements = this._form.elements;
        for(var i = 0; i < elements.length; i++){
            var element = form.elements[i];
            if(name !== ""){
                callback(this._valueOfField(element));
            }
        }
    }, _valueOfField: function(element){
        var type = element.type;
        var name = element.name.trim();
        var nodeName = element.nodeName.toLowerCase();
        switch(nodeName){
            case "input":
                if(type === "radio" || type === "checkbox"){
                    if(element.checked){
                        return element.value;
                    }
                }
                return element.value;
                break;
            case "select":
                if(type === "select-multiple"){
                    for(var i = 0; i < element.options.length; i++){
                        if(options[i].selected){
                            return element.value;
                        }
                    }
                }
                return element.value;
                break;
            case "button":
                switch(type){
                    case "reset": 
                    case "submit": 
                    case "button":
                        return element.value;
                        break;
                }
                break;
        } 
    }, serialize: function(form){
        var data = {};
        this._form = form;

        if(this._validate()){
            this._loopFields(function(value){
                if(value !== null) data[name] = value;
            });
        }
        return data;
    }
};

Để thực hiện nó, chỉ cần sử dụng Form.serialize(form)và hàm sẽ trả về Objecttương tự như sau:

<!-- { username: "username", password: "password" } !-->
<input type="text" value="username">
<input type="password" value="password">

Như một phần thưởng, điều đó có nghĩa là bạn không phải cài đặt toàn bộ gói jQuery chỉ cho một hàm tuần tự hóa.

Tôi đã viết một chức năng chăm sóc nhiều hộp kiểm và nhiều lựa chọn. Trong những trường hợp đó, nó trả về một mảng.

function getFormData(formId) {
    return $('#' + formId).serializeArray().reduce(function (obj, item) {
        var name = item.name,
            value = item.value;

        if (obj.hasOwnProperty(name)) {
            if (typeof obj[name] == "string") {
                obj[name] = [obj[name]];
                obj[name].push(value);
            } else {
                obj[name].push(value);
            }
        } else {
            obj[name] = value;
        }
        return obj;
    }, {});
}

hiển thị các trường phần tử đầu vào biểu mẫu và tệp đầu vào để gửi biểu mẫu của bạn mà không cần làm mới trang và lấy tất cả các giá trị với tệp bao gồm ở đây

<form id="imageUploadForm"   action="" method="post" enctype="multipart/form-data">
<input type="text" class="form-control" id="fname" name='fname' placeholder="First Name" >
<input type="text" class="form-control" name='lname' id="lname" placeholder="Last Name">
<input type="number" name='phoneno'  class="form-control" id="phoneno" placeholder="Phone Number">
<textarea class="form-control" name='address' id="address" rows="5" cols="5" placeholder="Your Address"></textarea>
<input type="file" name="file" id="file" >
<input type="submit" id="sub" value="Registration">					   
</form>

$('#imageUploadForm').on('submit',(function(e) 
{
     fname = $('#fname').val();
     lname =  $('#lname').val();
     address =  $('#address').val();
     phoneno =  $('#phoneno').val();
     file =  $('#file').val();
     e.preventDefault();
     var formData = new FormData(this);
     formData.append('file', $('#file')[0]);
     formData.append('fname',$('#fname').val());
     formData.append('lname',$('#lname').val());
     formData.append('phoneno',$('#phoneno').val());
     formData.append('address',$('#address').val());
     $.ajax({
		type:'POST',
                url: "test.php",
                //url: '<?php echo base_url().'edit_profile/edit_profile2';?>',

                data:formData,
                cache:false,
                contentType: false,
                processData: false,
                success:function(data)
                {
                     alert('Data with file are submitted !');

                }

     });

}))

$(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;
}, {});

Nó sẽ khắc phục vấn đề: không thể làm việc với multiselect.

Bạn hoàn toàn không đúng. Bạn không thể viết:

formObj[input.name] = input.value;

Bởi vì theo cách này nếu bạn có danh sách nhiều lựa chọn - các giá trị của nó sẽ được ghi đè bằng danh sách cuối cùng, vì nó được truyền dưới dạng: "param1": "value1", "param1": "value2".

Vì vậy, cách tiếp cận đúng là:

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);
}

Phương pháp này nên làm điều đó. Nó tuần tự hóa dữ liệu biểu mẫu và sau đó chuyển đổi chúng thành một đối tượng. Chăm sóc các nhóm hộp kiểm tra là tốt.

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;
}

Đây là một hàm vanilla JS đẹp mà tôi đã viết để trích xuất dữ liệu biểu mẫu dưới dạng một đối tượng. Nó cũng có các tùy chọn để chèn bổ sung vào đối tượng và để xóa các trường nhập mẫu.

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)
}

Dưới đây là một ví dụ về việc sử dụng nó với một yêu cầu bài viết:

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))
}