jquery .show 仅在最后显示

Question

我想在执行 web 方法的 ajax 命令之前显示加载 div，并在命令末尾关闭。 div 仅在 ajax 命令执行结束时出现。

以下代码块。

$("#dvUpProgress1").show();
$.ajax({
            type: "Post",
            url: "producao.aspx/GravarListaSalvar",
            data: "",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (obj) { }
        });

在后面的代码中：

[WebMethod]
    public static string GravarListaSalvar(string IdAutorizacaoProducaoGarantiaQualidade, string IdEtapa, string IdSubEtapa, string IdUsuarioLogado, string NomeCampo, string NomeAmigavel, string Resposta, string IdCampo)
    {
        ...
    }

Answer 1

您已通过async: false 将您的 POST 请求设置为同步。浏览器在脚本完成运行之前不会渲染内容 - 这只会在您的帖子完成后发生。

如果你想让进度条显示出来，你需要异步实现你的调用，这样浏览器就可以在服务器处理请求的同时渲染加载的 div。在当前例程中调用之后所做的任何事情，您都将转到您创建的success 函数。您的 javascript 应该像这样更新：

$("#dvUpProgress1").show();
$.ajax({
    type: "Post",
    url: "producao.aspx/GravarListaSalvar",
    data: "",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: true,
    success: function (obj) {
        // Here is where the rest of your code should go 
    }
});

您会注意到我将async 更改为true，它告诉浏览器异步处理调用，释放浏览器来呈现进度条。

如果您绝对必须同步调用，您始终可以通过执行类似操作来实现setTimeout

$("#dvUpProgress1").show();
setTimeout(function () {
    $.ajax({
        type: "Post",
        url: "producao.aspx/GravarListaSalvar",
        data: "",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false,
        success: function (obj) {
            // Here is where the rest of your code should go 
        }
    });
}, 100);

.. 但是你真的失去了 AJAX 开发的异步处理的所有好处（毕竟，AJAX 代表异步 JS 和 XML）。所以我真的，真的会建议反对进行同步调用。