javascript - 根据 AJAX 请求的类型显示 LoadingGif

Question

我有 1 个 POST ajax 和 1 个 GET ajax，我有这个:

  $(document).ready(function () {

        $(document).ajaxStart(function () {
            $("#div28").show();
        });
        $(document).ajaxStop(function () {
            $("#div28").hide();
        });

    });

它是为了显示LoadingGif，此时它对于两个Ajax请求都显示，那么我该怎么做才能让LoadingGif仅在POST类型ajax工作时显示？

编辑:这是我的 ajax 函数:

 $(document).ready(function () {
        $.ajax({
            contentType: "application/json; charset=utf-8",
            type: 'GET',
            url: 'api/Appointments/', 
            dataType: 'json',
            success: function (result) {
                if ((result.AppTime = "9:00") && (result.AppWithYritys = "Laakkonen")) {
                    document.getElementById("A9").style.background = "red";
                }
                else {
                    alert("error1");
                }
            },
            error: function (error) {
                alert("error");
            },
        });
    });

和 POST ajax:

  var request = $.ajax({
            type: "POST",
            data: JSON.stringify(app),
            url: "/api/Appointments",
            contentType: "application/json",
            dataType: "html"
        });

        request.done(function (data) {
            if (data != -1) {
                alert("You Have successfully made an appointment");
                location.assign("http://tid.fi");
            }
            else {
                alert("There has been an error!");
            }
        });

        request.fail(function (gr) {
            location.assign("http://google.com");
        });
    };

POST ajax 是一个自定义函数，单击按钮即可触发。只是一个信息。

Answer 1

使用ajaxSend和ajaxComplete你可以看到请求的“类型”是什么

但是，您还需要保留事件请求的计数 - 对于您的简单页面来说可能不需要 - 但有它就好了

$(document).ready(function () {
    var started = 0;
    $(document).ajaxSend(function (event, jqXHR, settings) {
        if (settings.type == 'POST') {
            if(!(started++)) { // only need to show on the first simultaneous POST
                $("#div28").show();
            }
        }
    });
    $(document).ajaxComplete(function (event, jqXHR, settings) {
        if (settings.type == 'POST') {
            if(!(--started)) { // only hide once all simultaneous POST have completed
                $("#div28").hide();
            }
        }
    });
});

没有计数器的解决方案

$(document).ready(function () {
    $(document).ajaxSend(function (event, jqXHR, settings) {
        if (settings.type == 'POST') {
            $("#div28").show();
        }
    });
    $(document).ajaxStop(function () {
        $("#div28").hide();
    });
});

这将在 POST 上显示，并在所有 ajax 停止后隐藏 - 不太明显，但它可能是一个有效的解决方案