TypeError: ‘append’ called on an object that does not implement interface FormData.

20 Июн, 2020 21:06, OliLukoye

Ошибка вида «TypeError: ‘append’ called on an object that does not implement interface FormData.» за частую появляется при попытки передачи объекта данных FormData через функцию ajax библиотеки JQuery. Например следующий код выдаст ошибку:

function formSubmit(e)
{
    e.preventDefault();
    var form = this;
    var formData = new FormData(form);
    formData.append('ajax', 'Y');
    $.ajax({
        url: api_path,
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data);
        },
        dataType: 'json'
    });
}

function formSubmit(e)

{

e.preventDefault();

var form = this;

var formData = new FormData(form);

formData.append('ajax', 'Y');

$.ajax({

url: api_path,

type: 'POST',

data: formData,

success: function (data) {

alert(data);

dataType: 'json'

});

}

Что бы исправить эту ошибку необходимо для функции ajax передавать два параметра processData: false, contentType: false. Правильный код будет выглядеть следующим образом:

function formSubmit(e)
{
    e.preventDefault();
    var form = this;
    var formData = new FormData(form);
    formData.append('ajax', 'Y');
    $.ajax({
        url: api_path,
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function (data) {
            alert(data);
        },
        dataType: 'json'
    });
}

function formSubmit(e)

{

e.preventDefault();

var form = this;

var formData = new FormData(form);

formData.append('ajax', 'Y');

$.ajax({

url: api_path,

type: 'POST',

data: formData,

processData: false,

contentType: false,

success: function (data) {

alert(data);

dataType: 'json'

});

}

processData — по умолчанию, все передаваемые на сервер данные, предварительно преобразуются в строку (url-формата: fName1=value1&fName2=value2&...) соответствующую «application/x-www-form-urlencoded». Т.к. у нас форма и мы можем передавать там файл, то тип формы enctype=»multipart/form-data» и данные передаются в другом формате. Следовательно значение должно быть false.
contentType — при отправлении запроса на сервер, данные передаются в формате, указанном в contentType. По умолчанию используется ‘application/x-www-form-urlencoded’, по этому также отключаем этот параметр.