Ajax加载器未显示。

Question

我有一个工作正常的jQuery Ajax代码，如何在调用方法时显示消息？我尝试了一些方法，但它们没有正常工作。

  function drawChart(posId) {
        $.ajax({
            type: 'GET',
            dataType: 'json',
            contentType: 'application/json',
            url: '@Url.Action("GetProviderReport", "Report")',
            data: { posId: posId },
            beforeSend: function () { $("#loaderDiv").css("display","block"); },
            success: function(result) {
                var data1 = new google.visualization.DataTable();
                var data2 = new google.visualization.DataTable();
                var data3 = new google.visualization.DataTable();
                var months = ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'ابان', 'اذر', 'دی', 'بهمن', 'اسفند'];

                data1.addColumn('string', 'ماه');
                data1.addColumn('number', 'مجموع نظر سنجی');

                for (var i = 0; i < result.length; i++) {
                    if (result[i].typeValue == 1) {
                        data1.addRow([months[result[i].MonthValue - 1], result[i].CountValue]);

                    }


                }

                var chart = new google.visualization.ColumnChart(document.getElementById('chartdiv7'));

这是HTML标签 <div id="loaderDiv" style="visibility: hidden">正在获取信息</div>

- salar

Answer 1

如果这是一个点击事件，您可以在用户单击按钮时添加加载器（$("#loaderDiv").css("display","block");），然后在完成get调用时删除加载器（$("#loaderDiv").css("display","none");）。

<div>
<button id="btn">Click me</button>

<script type="text/javascript">
$(function(){
    $("#btn").click(function(event) {
        clicked();
    });
    var clicked = function(){
        alert("add loader");
            //use the ajax call instead of setTimeout
        setTimeout(function() {
            //Remove the loader inside success/complete function
            alert("remove loader")
        }, 2000);
    }
});

- Rinrub

Answer 2

如果这个函数中的ajax调用是唯一的，那么你可以将css部分移到函数的第一部分，然后在成功/错误部分再次隐藏它 - 需要在两个部分都有以防ajax失败。

function drawChart(posId) {
        $('#loaderDiv').css('visibility', 'visible');
        //OR
        $('#loaderDiv').show();
        $.ajax({
            type: 'GET',
            dataType: 'json',
            contentType: 'application/json',
            url: '@Url.Action("GetProviderReport", "Report")',
            data: { posId: posId },
            success: function(result) {
                $('#loaderDiv').css('visibility', 'hidden');
                //OR
                $('#loaderDiv').hide();

- Craicerjack

---

非常感谢 @craicerjak，那么我应该删除标签样式吗？ - salar

如果你想的话，你可以移除样式标签，这样它就会一直显示。在这种情况下，我通常会创建一个名为“hide”的类，并使用它来设置"display: none;"，然后根据需要添加或删除此类，或者使用jQuery。 - Craicerjack