在完成我的 $.ajax 请求时显示进度图像答案

【问题标题】：Show progress image while finishing my $.ajax request在完成我的 $.ajax 请求时显示进度图像
【发布时间】：2016-01-19 00:48:34
【问题描述】：

我有这个代码：

data = new FormData($('#form')[0]);
$.ajax({
    type: 'POST',
    url: 'systems/createpostsystem.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false
}).done(function(data) {
    alert(data);
    window.location = "myposts.php";
});

我使用了$.ajaxStart()，但它没有达到我想要的效果。

我还尝试了success:function(){my code} 并提出了两次请求！

现在我想在 AJax 完成时显示进度图像。

【问题讨论】：

你试过什么？..
刚刚编辑了我的问题
Jquery Ajax Loading image的可能重复
在调用 AJAX 时只显示“加载图像”并将其隐藏在“.done()”中。一个简单的方法。

标签： php jquery ajax

【解决方案1】：

在执行 ajax 函数之前添加加载图像（我假设是 gif）。成功后，删除图像并将其替换为您想要的任何内容（成功图像、从服务器返回的数据等）。

例子：

var formData = new FormData($('#form')[0]);
var imageContainer = $('#selector');
imageContainer.attr('src', 'path/to/loading.gif');
$.ajax({
    type: 'POST',
    url: 'systems/createpostsystem.php',
    data: formData,
    success: function(data) {
        // Do something
    }
});

javascript ajax jquery dom

【讨论】：

【解决方案2】：

您只需要在执行 AJAX 请求之前编辑 DOM，添加您的加载程序，然后在 complete 回调中将其删除。我通常使用 jQuery 回调函数而不是 XHR 对象回调。

请注意：

只有在请求成功完成时才会调用success 回调（和done XHR 回调）
始终调用complete（和always XHR 回调），即使请求失败。

例子：

function addLoader() {
    var img = $('<img />', { 
      id: 'loader',
      src: '/path/to/your/loader.gif'
    });
    img.appendTo($('body'));
}
function removeLoader() {
    $('#loader').remove();
}

addLoader(); // here the we add our loader
data = new FormData($('#form')[0]);
$.ajax({
    type: 'POST',
    url: 'systems/createpostsystem.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    complete: function() {
        removeLoader(); // here we remove it
    },
    success: function(data) {
        alert(data);
        window.location = "myposts.php";
    }
});

【讨论】：