javascript - 如果返回数据错误，如何防止函数运行

Question

我有一个 AJAX 请求，当数据可计算时，它会显示一个带有进度条的模态窗口，但如果出现错误，我希望返回错误并且模态窗口保持隐藏。

$(document).ready(function(){
$(function () {
    var pleaseWait = $('#pleaseWaitDialog');
        showPleaseWait = function () {
            pleaseWait.modal('show');
        };
        hidePleaseWait = function () {
            pleaseWait.modal('hide');
        };
    });

    var $myForm = $('.form')
    $myForm.on('submit', function(event){
        event.preventDefault();
        var form = $(event.target)
        var formData = new FormData(form[4]);

        $.ajax({
            xhr: function() {
                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        showPleaseWait(); // <---------------  This runs even when view returns error
                        console.log('Percentage uploaded: ' + (e.loaded / e.total))
                        var percent = Math.round(e.loaded / e.total * 100);
                        $('#progress-bar').attr('aria-valuenow', percent).css('width', percent + '%');
                    }
                });
                return xhr;
                },
            type: 'POST',
            url: form.attr('action'),
            enctype: 'multipart/form-data',
            processData: false,
            contentType: false,
            data: new FormData(this),
            success: function(data){
                if (data.success) {
                    window.location.href = data.url;
                }
                if (data.error) {
                    $("#top").html(data.error.title).addClass('form-field-error');
                    $("#div_id_title").removeClass('form-group');
                }
            },
        });
    });
});

我尝试将 showPleaseWait 函数移至 if(data.error) 语句下，但这不起作用。

如果响应是(data.error)，如何保持模态窗口隐藏？

编辑:

这会删除页面的 HTML 并显示 JSON 响应:

            success: function(data){
                if (data.success) {
                    window.location.href = data.url;
                }
            error: function (jqXHR, exception) {
                if (data.error) {
                    $("#top").html(data.error.title).addClass('form-field-error');
                    $("#div_id_title").removeClass('form-group');
                    }
                }
            },

Answer 1

你的函数是ajax对象的“succes”属性。 如文档所示，有一个“error”属性来处理ajax错误，这里是签名:

error(xhr,status,error)

像使用 succes 属性一样使用它:

 $.ajax({
        xhr: function() {
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener('progress', function(e) {
                if (e.lengthComputable) {
                    showPleaseWait(); // <---------------  This runs even when view returns error
                    console.log('Percentage uploaded: ' + (e.loaded / e.total))
                    var percent = Math.round(e.loaded / e.total * 100);
                    $('#progress-bar').attr('aria-valuenow', percent).css('width', percent + '%');
                }
            });
            return xhr;
            },
        type: 'POST',
        url: form.attr('action'),
        enctype: 'multipart/form-data',
        processData: false,
        contentType: false,
        data: new FormData(this),
        success: function(data){
            if (data.success) {
                window.location.href = data.url;
            }
        },
        error: function(xhr,status,error){

            // Do something
        }

    });

希望它能解决您的问题!

$.ajax() doc