0

我有一个 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');
                    }
                }
            },
4

2 回答 2

1

您的函数是 ajax 对象的“成功”属性。如文档中所示，有一个“错误”属性来处理 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() 文档

于 2019-12-12T17:15:39.613 回答
0

我认为你正在使用 Jquery 3.0 所以试试这个

var jqxhr = $.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');
                }
            },
        })
  .done(function() {
    alert( "success" );
  })
  .fail(function() {
    alert( "error" );
$("#top").html(data.error.title).addClass('form-field-error');
                    $("#div_id_title").removeClass('form-group');
  })
  .always(function() {
    alert( "complete" );
  });

// 在这里执行其他工作...

// 为上面的请求设置另一个完成函数 jqxhr.always(function() { alert( "second complete" ); });

于 2019-12-12T17:18:28.590 回答