Question

我正在尝试在发送ajax请求之前显示加载消息，并在success回调中再次隐藏该消息。

$('#uploadForm').submit( function () {
    var fileExists;
    if((typeof reference !== 'undefined') && reference) {
        $('#loading').css('display', 'block');
        CheckFileExists(reference).success(function(response) {
            if(response.status === 'true') 
                fileExists = true;
            else if(response.status === 'false')
                fileExists = false;
            $('#loading').css('display', 'none');
        });
        if(fileExists) {
            alert('Sorry, file already exists!');
            return false;
        }
    }
    return true;
});

function CheckFileExists(el) 
{
    var fi = el; // GET THE FILE INPUT.
    if(fi.value !== "") {
        var file_name = fi.files[0].name; // FILE NAME
        return $.ajax ({
            url: "task/file-check",
            data: { file_name : file_name},
            method: 'POST',
            dataType: 'json',
            async: false                
        });
    }       
}

但这将首先发出ajax请求，弹出警报，最后出现message。

我还尝试将if-else保留在setTimeout中：

$('#uploadForm').submit( function () {
    var fileExists;
    // load
    appendData();

    setTimeout(function() {
        if((typeof reference !== 'undefined') && reference) {           
            CheckFileExists(reference).success(function(response) {
                if(response.status === 'true') 
                    fileExists = true;
                else if(response.status === 'false')
                    fileExists = false;             
                $('#overlay-procurement').remove();
            });
            if(fileExists) {
                alert('Sorry, file already exists!');
                return false;
            }
        }
        return true;
    }, 3000);
});

这还将在发出ajax请求（提交器出现并弹出警报）的同时提交页面（重新加载页面）。

也尝试了beforeSend，但发现它不适用于async: false。

Answer 1

提交后再做

$('#uploadForm').submit( function () {
   $('#loading').css('display', 'block');

并获得成功

   $('#loading').css('display', 'none');

用ajax显示加载消息

1 个答案: