Ajax 覆盖在 ajax 请求期间未显示

Ajax overlay not showing during ajax request

本文关键字：显示 请求 覆盖 ajax Ajax      更新时间：2023-09-26
$("#keywordSearchSubmit").on("click", function()
{
    showOverlay();
    var searchString = $("#search-results-form-query").val();
    var manResult = $.ajax({
        url: "Order?Page=storeSearchKeyword",
        data: "searchString="+searchString,
        async: false
    }).responseText;
    $("#cart-product-list").empty();
    $("#cart-product-list").append(manResult);
    hideOverlay();
});
function showOverlay()
{
//alert('a');
 $("#overlay").css("display","block");
//document.getElementById("overlay").style.display = 'block';
}
function hideOverlay()
{
//alert('b');
$("#overlay").css({"display":"none"});
//document.getElementById("overlay").style.display = 'none';
}

我有上面的Javascript，以便在执行ajax调用时出现一个覆盖层。下面是覆盖层的 HTML。

<div id='"overlay'" style='"display:none;'">
<div style='"display:block; margin-left: auto; margin-right: auto; margin-top:15%'" class='"bubblingG'">
<span id='"bubblingG_1'"></span><span id='"bubblingG_2'"></span><span id='"bubblingG_3'">
</span></div></div>

无论我使用上述哪种 JavaScript，叠加都不会显示：

document.getElement...$("#overlay"(...

唯一出现叠加层的时间是我添加警报框时。一旦我在警报框中单击"确定"，就会出现叠加层。

我试过：

$("#overlay").trigger("create");

但没有成功。我知道我可以使用 jQuery 开始和完成而不是像上面那样调用方法，但它仍然只会在显示覆盖之前使用警报时才会显示。

请求在服务器端处理大约需要 5 秒，因此肯定会显示覆盖层。

我想这与同步AJAX调用有关(参见有关AJAX设置的jQuery文档(。 我会尝试将您的代码修改为类似

showOverlay();
var searchString = $("#search-results-form-query").val();
$.ajax({
    url: "Order?Page=storeSearchKeyword",
    data: "searchString="+searchString,
    success: function (data, textStatus, jqXHR) {
        var manResult = jqXHR.responseText;
        $("#cart-product-list").empty();
        $("#cart-product-list").append(manResult);
        hideOverlay();
    }
});
相关文章：