Question

我在使用ajax加载数据时遇到问题，我使用async false，因为我希望我的ajax进程先运行。如果不使用异步false，则显示和数据将被堆叠。如何在ajax异步false中显示我的加载器？

想要添加我的装载程序。这是我的装载机

$("#loading").show();

这是我更改时的选择事件

$('#boothFill').on('change', function () {
    if ($.fn.DataTable.isDataTable('#tbltransaction')) {
        $('#tbltransaction').DataTable().destroy();
    }
    $('#areaFill').find('.optArea').remove();
    $('#acamFill').find('.optAcam').remove();
    if ($("#boothFill").val() != "all") {
        $('#statisticData').find('.removeCardStat').remove();
        ajaxCardStatistic($('#dateStartTanggal').val(), $('#dateEndTanggal').val(), $('#areaFill').val(), $('#boothFill').val(), $('#acamFill').val(), $("#productFill").val());
    }else{
        $('#statisticData').find('.removeCardStat').remove();
    }
    ajaxArea($('#boothFill').val(), $('#acamFill').val());
    ajaxAcam($('#areaFill').val(), $('#boothFill').val());
    ajaxGet($('#dateStartTanggal').val(), $('#dateEndTanggal').val(), $('#areaFill').val(), $('#boothFill').val(), $('#acamFill').val(), $("#productFill").val(), $("#productTypeFill").val());      getAllData($('#dateStartTanggal').val(), $('#dateEndTanggal').val(), $('#areaFill').val(), $('#boothFill').val(), $('#acamFill').val());
});

这是在选择更改时调用的功能

function ajaxCardStatistic(dateStartTanggal, dateEndTanggal, area, booth, acam, product){
    $.ajax({
        type: "POST",
        url: "dashboard/statisticCard",
        data: {
            dateStart : dateStartTanggal,
            dateEnd : dateEndTanggal,
            area : area,
            booth : booth,
            acam : acam,
            product : product,
        },
        dataType: "JSON",
        async: false,
        success: function (response) {
            $.each(response.data, function(item, data){
                if (!$.trim(data.product_type_name)) {
                    var html = "<div class='col-12 col-sm-6 col-lg-3 removeCardStat'><div class='card'><div class='card-header'><h4>" + data.motoquick_name + " (" + data.jenis + ")</h4></div>";
                }else{
                    var html = "<div class='col-12 col-sm-6 col-lg-3 removeCardStat'><div class='card'><div class='card-header'><h4>" + data.motoquick_name + " (" + data.jenis + " > " + data.product_type_name + ")</h4></div>";
                }
                html += "<div class='card-body' style='padding-top: 10px;padding-bottom: 10px;'><div class='row text-center'>";
                html += "<div class='col-lg-6 col-md-6 col-sm-12 col-12'><h4>" + data.transaction + "</h4><span>Trx</span></div>";
                html += "<div class='col-lg-6 col-md-6 col-sm-12 col-12'><h4>" + (data.rate*100).toFixed(0) + "% </h4><span>Avg/Day</span></div>";
                html += "</div></div>";
                html += "<div class='card-footer text-center'>" + rupiah(data.revenue) + " <br><span>Revenue</span></div>";
                html += "</div></div>";
                $("#statisticData").append(html);
            });
        }
    });
}

Answer 1

You can use 

beforeSend: function() {

                        $("#loading").show();
                        }


Example
function ajaxCardStatistic(dateStartTanggal, dateEndTanggal, area, booth, acam, product){   
            $.ajax({
                type: "POST",
                url: "dashboard/statisticCard",
                data: {
                    dateStart : dateStartTanggal,
                    dateEnd : dateEndTanggal,
                    area : area, 
                    booth : booth, 
                    acam : acam, 
                    product : product, 
                },
                dataType: "JSON",
                beforeSend: function() {

                        $("#loading").show();
                        },
                success: function (response) {
                    $.each(response.data, function(item, data){
                        if (!$.trim(data.product_type_name)) {
                            var html = "<div class='col-12 col-sm-6 col-lg-3 removeCardStat'><div class='card'><div class='card-header'><h4>" + data.motoquick_name + " (" + data.jenis + ")</h4></div>";
                        }else{
                            var html = "<div class='col-12 col-sm-6 col-lg-3 removeCardStat'><div class='card'><div class='card-header'><h4>" + data.motoquick_name + " (" + data.jenis + " > " + data.product_type_name + ")</h4></div>";
                        }
                        html += "<div class='card-body' style='padding-top: 10px;padding-bottom: 10px;'><div class='row text-center'>";
                        html += "<div class='col-lg-6 col-md-6 col-sm-12 col-12'><h4>" + data.transaction + "</h4><span>Trx</span></div>";
                        html += "<div class='col-lg-6 col-md-6 col-sm-12 col-12'><h4>" + (data.rate*100).toFixed(0) + "% </h4><span>Avg/Day</span></div>";
                        html += "</div></div>";
                        html += "<div class='card-footer text-center'>" + rupiah(data.revenue) + " <br><span>Revenue</span></div>";
                        html += "</div></div>";
                        $("#statisticData").append(html);
                    });
                 $("#loading").hide();
                }
            });
        }

Answer 2

只需将ajax放在这样的加载器中在您的代码 dataType：“ JSON” 之后

beforeSend: function() {
   $("#loader").show();
},

成功隐藏这样的装载程序后

$("#loader").hide();

谢谢

如何使用async在Ajax加载中添加加载器：false

2 个答案: