Отмена ajax запроса с помощью abort()

127

02 августа 2019, 23:40

Нашёл в интернете как можно отменить выполнение ajax запроса при необходимости. И вот мне нужно отменить его если поле формы пустое и нечего не передаётся. Вот мой код:

$('#btnConfirm').on('click', function () {
        if ($('#pass').css('display') == 'none') {
            AjaxPassRecovery("/Authorization/FindUserAccount", Success)
        }
    });
function AjaxPassRecovery(url, callback) {
        var xhr = $.ajax({
            beforeSend: function () {
                var mail = $('#txtMail').val();
                if (mail === '')
                    xhr.abort();
            },
            type: "POST",
            url: url,
            data: {
                "Email": $('#txtMail').val()
            },
            success: function (result) {
                callback(result);
            },
            error: function (xhr) {
                swal({
                    title: xhr.responseText,
                    type: "warning"
                });
            }
        });
    }
function Success(result) {
        if (result > 0) {
            $('#txtMail').attr('readonly', 'readonly');
            $('#pass').slideDown();
        }
    }

Я привязываю к кнопке выполнение функции с ajax запросом и в нём колбеком вызываю функцию success. И вот как в примере нашёл в переменную xhr записываю ajax запрос. И в событии до отправки ajax запроса проверяю если поле пустое то отменить выполнение запроса. Но вылетает ошибка.

Я подумал что дело в области видимости и объявил переменную xhr глобально на этой странице, но ошибка та же самая. В чём дело? Что я делаю не так? То что я увидел в примерах в интернете выглядит примерно так же.

Answer 1

beforeSend: function (xhr) { // сюда добавить xhr 
                var mail = $('#txtMail').val();
                if (mail === '')
                    xhr.abort();
            },

Answer 2

Ошибка в том что на момент вызова функции beforeSend xhr = undefined, поэтому вместо того чтобы отменять запрос лучше его вообще не отправлять.

function AjaxPassRecovery(url, callback) {
    var mail = $('#txtMail').val();
    if (mail === '') return;
    $.ajax({
        type: 'POST',
        url: url,
        data: {
            Email: mail
        },
        success: function (result) {
            callback(result);
        },
        error: function (xhr) {
            swal({
                title: xhr.responseText,
                type: 'warning'
            });
        }
    });
}