JavaScript — IT заметки

Прогресс загрузки в jquery функции $.ajax

29 Июн, 2020 13:22, OliLukoye

Что бы отображать прогресс загрузки при использовании JQuery в $.ajax функции указываем параметр xhr. Пример:

var orderForm = document.getElementById('basket-order-form');
orderForm.addEventListener('submit', function (e) {
    e.preventDefault();

    var formData = new FormData(orderForm);
    var btnText = $('.js--submit-order').text();
    $.ajax({
        url: api_path + 'basket.php',
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        xhr: function ()
        {
            var jqXHR = null;
            if ( window.ActiveXObject )
            {
                jqXHR = new window.ActiveXObject( "Microsoft.XMLHTTP" );
            }
            else
            {
                jqXHR = new window.XMLHttpRequest();
            }

            //Upload progress
            var btnSuccess = $('.js--submit-order');
            jqXHR.upload.addEventListener( "progress", function ( evt )
            {
                if ( evt.lengthComputable )
                {
                    var percentComplete = Math.round( (evt.loaded * 100) / evt.total );
                    //Do something with upload progress
                    // console.log( 'Uploaded percent', percentComplete );
                    btnSuccess.text(percentComplete + '%');
                }
            }, false );

            //Download progress
            jqXHR.addEventListener( "progress", function ( evt )
            {
                if ( evt.lengthComputable )
                {
                    var percentComplete = Math.round( (evt.loaded * 100) / evt.total );
                    //Do something with download progress
                    console.log( 'Downloaded percent', percentComplete );
                }
            }, false );

            return jqXHR;
        },
        success: function (data) {
            $('.js--submit-order').text(btnText);
        },
        dataType: 'json'
    });
});

var orderForm = document.getElementById('basket-order-form');

orderForm.addEventListener('submit', function (e) {

e.preventDefault();

var formData = new FormData(orderForm);

var btnText = $('.js--submit-order').text();

$.ajax({

url: api_path + 'basket.php',

type: "POST",

data: formData,

processData: false,

contentType: false,

xhr: function ()

{

var jqXHR = null;

if ( window.ActiveXObject )

{

jqXHR = new window.ActiveXObject( "Microsoft.XMLHTTP" );

}

else

{

jqXHR = new window.XMLHttpRequest();

}

//Upload progress

var btnSuccess = $('.js--submit-order');

jqXHR.upload.addEventListener( "progress", function ( evt )

{

if ( evt.lengthComputable )

{

var percentComplete = Math.round( (evt.loaded * 100) / evt.total );

//Do something with upload progress

// console.log( 'Uploaded percent', percentComplete );

btnSuccess.text(percentComplete + '%');

}

}, false );

//Download progress

jqXHR.addEventListener( "progress", function ( evt )

{

if ( evt.lengthComputable )

{

var percentComplete = Math.round( (evt.loaded * 100) / evt.total );

//Do something with download progress

console.log( 'Downloaded percent', percentComplete );

}

}, false );

return jqXHR;

success: function (data) {

$('.js--submit-order').text(btnText);

dataType: 'json'

});

Способ такой реализации взят от сюда: https://gist.github.com/umidjons/6173837

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. Правильный код будет выглядеть следующим […]