Question

我有AJAX请求，当用户点击按钮时会运行该请求。我想在执行AJAX请求期间显示加载图标。我使用了下一个代码，但它没有像我预期的那样工作。

让我试着解释一下情况。当用户点击按钮时，在终端我注意到请求的同时用户没有看到加载图标。在终端中完成所有请求后，我会看到200 OK状态。只有在那之后我才会看到图标，但拍摄时间。所以我的问题是如何在后台执行查询时显示图标？

$("#btn").click(function(){
    $.ajax({
        url: "some url adress",
        type: "post",
        contentType: 'application/json; charset= utf-8',
        dataType: 'json',
        data: jsonData,
    })
    .always(function (dataOrjqXHR, textStatus, jqXHRorErrorThrown){
        $('#loading-icon').fadeIn();
    })
    .done(function (data, textStatus, jqXHR) {
        $('#loading-icon').fadeOut();
    });
});

Answer 1

请求完成后，always()处理程序中的代码将被执行。

在发送请求之前开始显示加载图标：

$("#btn").click(function(){
    $('#loading-icon').fadeIn();

    $.ajax({
        url: "some url adress",
        type: "post",
        contentType: 'application/json; charset= utf-8',
        dataType: 'json',
        data: jsonData,
    })
    .done(function (data, textStatus, jqXHR) {
        $('#loading-icon').fadeOut();
    });
});

Answer 2

你创建简单的funcetion，如：

function loader() {
    if ($('#dv_Loading').css('display') == 'none') {
        $('#dv_Loading').fadeIn("slow");
    }
    else {
        $('#dv_Loading').fadeOut('slow');

    }
}

使用此功能如：

$("#btn").click(function(){
loader();

    $.ajax({
        url: "some url adress",
        type: "post",
        contentType: 'application/json; charset= utf-8',
        dataType: 'json',
        data: jsonData,
success: function (data) {

                        loader();
                    }
    });

});

Answer 3

试试这个

       https://stackoverflow.com/questions/48611821/how-to-show-a-hidden-element-with-jquery/48611918#48611918

我希望至少能为我工作

在你的情况下，

 $("#btn").click(function(){
 $.ajax({
 url : "URL",
 data: { data },
 beforeSend: function(){
 $("#loading-icon").show();
 },
 complete: function(){
 $("#loading-icon").hide();
 },
  success:  function (response) {
 });
 });
  });

如何在后台执行查询时显示加载图标？

3 个答案: