当页面加载c# web表单时，Ajax加载gif

Question

我试图在处理数据时在我的页面上创建一个加载的gif。

这是我到目前为止尝试过的：

HTML标记：

 <div id="loadingImg" style="display: none;" class="m-auto mt-9">
     <img src="load.gif" height="120" width="240" />
 </div>

代码隐藏：

[WebMethod]
public void getData(){
 //I got my DataTable data from Database
 gridview1.DataSource = dt;
 gridView1.DataBind();
}

这是我的Ajax加载代码：

$(document).ready(function () {
            $('#loadingImg').show();
            $.ajax({
                url: "/mypages.aspx/getData",
                method: 'get',
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    
                },
                complete: function () {
                    $('#loadingImg').hide();
                },
                error: function (response) {
                    console.log(response);
                }
            });

        });

但我会在页面成功加载后获得loading.gif。如何在页面处理这些void getData()时显示加载gif

Answer 1

在ajax请求C#方法时，我们通常使用成功和错误函数。我们还使用了一个complete函数。成功和完整功能之间的区别是-

只有当你的when服务器响应200OK HTTP报头时，才会调用.success() --基本上是在一切正常的情况下。

另一方面，

无论ajax调用是否成功，.complete()都会被调用。

$('#loadingImg').hide()；

在您的代码中，使用success函数中的gif隐藏函数。然后它就会像你所期望的那样正常工作。

$(document).ready(function () {
            $('#loadingImg').show();
            $.ajax({
                url: "/mypages.aspx/getData",
                method: 'get',
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    $('#loadingImg').hide();
                },
                complete: function () {
                    
                },
                error: function (response) {
                    console.log(response);
                }
            });

        });

• https://api.jquery.com/ajaxComplete/
• https://api.jquery.com/ajaxSuccess/