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

时间:2016-01-18 15:30:20

标签: php jquery ajax

我有这段代码:

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完成时显示进度图像。

2 个答案:

答案 0 :(得分:3)

在执行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
    }
});

答案 1 :(得分:0)

您只需在执行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";
    }
});