通过javascript检测asp的ajax请求结束

本文关键字：ajax 请求 结束 asp javascript 检测 通过 | 更新日期: 2023-09-27 18:08:18

如果用户单击input -标记(type="radio")，则从数据库加载新数据。因为它需要花费一段时间，所以我展示了一个加载动画。之后，动画必须不显示。

现在是我的问题:我如何检测您的ajax请求是否从aspx页面已完成javascript代码取消显示动画?如果没有，是否有其他方法可以得到相同的结果?

更新1:我只使用这几行代码:

<asp:ScriptManager EnablePartialRendering="true"  runat="server" />
<asp:UpdatePanel ID="updPnlCategorieen" UpdateMode="Always" runat="server">
    <ContentTemplate>
        <asp:Panel ID="pnlHoofdTopics" CssClass="topics" runat="server" />
        <asp:Panel ID="pnlCategorien" CssClass="topics" runat="server" />
        <asp:Panel ID="pnlItems" CssClass="topics" runat="server" />
        <asp:Panel cssclass="loading" ID="pnlLaden" runat="server">
            <div class="circle"></div>
            <div class="circle1"></div>
        </asp:Panel>
    </ContentTemplate>
</asp:UpdatePanel>
在(c#): 后面的代码放置触发器
updCategorieen.Triggers.Add(new AsyncPostBackTrigger() {
    ControlID = rbtCat.ID,
    EventName = "CheckedChanged"
});

显示加载动画，我使用javascript。以下代码:

var topic = []; //--> location for all the radio buttons
var laden; //--> location for loading div
document.addEventListener("DOMContentLoaded", function () {
    init();
});
function init() {
    laden = document.getElementsByClassName("loading")[0];
    topic = document.getElementsByClassName("topic");
    laden.style.display = "none";
    for (i = 0; i < topic.length; i++) {
        topic[i].addEventListener("click", function () {
            startLaden();
        });
    }
    geladen.addEventListener("change", function () {
        stopLaden();
    });
}
function startLaden() {
    laden.style.display = "block";
}
function stopLaden() {
    laden.style.display = "none";
    topic = document.getElementsByClassName("topic");
}

更新2:我也尝试在加载所有主题后在服务器端删除它。

pnlLaden.Style["display"] = "none";

可以，但是如果我再放一次，加载动画就不会回来了。我一开始就这么做。

pnlLaden.Style["display"] = "block";

但是没有效果…

我也尝试过一些在互联网上发现的东西，但不像live, on等，但没有任何作用。

谁能帮帮我，我是ajax和Asp.net的新手?

通过javascript检测asp的ajax请求结束

@ Karl Anderson建议我使用asp:UpdateProgress，它很有效。我的代码现在是这样的:

<%-- my asp:UpdatePanel--%>
<asp:UpdateProgress ID="updPrgLadenTopics" AssociatedUpdatePanelID="updPnlCategorieen" 
                    runat="server">
    <ProgressTemplate>
        <asp:Panel CssClass="loading" ID="pnlLaden" runat="server">
            <div class="circle"></div>
            <div class="circle1"></div>
        </asp:Panel>
    </ProgressTemplate>
</asp:UpdateProgress>
相关文章：