JavaScript 显示加载器，同时 Controller 响应

Question

嗨，我有一个 JQuery 函数，它在以下情况下调用 Controller : Controller 响应 (success()) 正在加载 iFrame； 基本上;转换器在 30 秒后返回成功函数，因此我尝试使用

显示加载图像

beforeSend: function()
{
}, 

功能我尝试了很多，但不起作用；您能给我建议如何实现它吗？我的代码如下:

    var callController = function (FirstName, documentId, fileName, packet) {
    $.ajax({
        type: "POST",
        url: "http://localhost:63902/Home/Preview?DocumentId=" + documentId + "&FileName=" + fileName + "&packet=" + packet,
        cache: false,
        async: false,

        //controller happens...

        success: function (returnedValue) {
            rememberDocumentId(documentId);
            location.reload("#mainIframe");
            setTimeout(function () {

            }, 3000);

            document.getElementById("mainIframe").style.display = "none";
            document.getElementById("documentIframe").style.display = "block";
            document.getElementById("documentIframe").src = "http://localhost:63902/FileProcessing/PDFProcessing/TempPDF/" + returnedValue;

            event.preventDefault();
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(jqXHR + " " + textStatus + " " + errorThrown);
        }
    });

};

Answer 1

您可以在 $.ajax({...}) 之后或之前显示加载程序，但您不应该永远不要使用 async:false，这是万恶之源，它会在请求未成功的情况下卡住浏览器。

像这样:

var callController = function (FirstName, documentId, fileName, SL) {
//here
showLoader();
$.ajax({
    type: "POST",
    url: "http://localhost:63902/Home/Preview?DocumentId=" + documentId + "&FileName=" + fileName + "&SL=" + SL,
    cache: false,

    //controller happens...

    success: function (returnedValue) {
        rememberDocumentId(documentId);
        location.reload("#mainIframe");
        setTimeout(function () {

        }, 3000);

        document.getElementById("mainIframe").style.display = "none";
        document.getElementById("documentIframe").style.display = "block";
        document.getElementById("documentIframe").src = "http://localhost:63902/FileProcessing/PDFProcessing/TempPDF/" + returnedValue;
       //hide Here
        hideLoader();
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert(jqXHR + " " + textStatus + " " + errorThrown);
        //hide Here
        hideLoader();
    }
});
}