javascript - 试图显示加载图像

标签 javascript jquery jquery-selectors

我已经指出了问题行,所以显示工作代码:

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#btnGet').click(function() {
                get_conflicts( $("#txtValue").val() );
            });

            $("#txtValue").live('keyup', function() 
            { 
                if ($("#txtValue").val().length > 3) {
                    get_conflicts( $("#txtValue").val() );
                } else {
                    $("#divResults").empty();
                }
            });

            function get_conflicts( phrase ) {
                $.ajax({
                    type: 'POST',
                    url: 'conflict.asmx/GetConflicts',
                    data: '{phrase: "' + phrase + '"}',
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    beforeSend:  function() {
                        $('#spanLoading').empty().append("<img src='/img/loading.gif' />");
                    },
                    success: function( conflicts ) {
                        $("#divResults").empty();

                        if( conflicts.d[0] ) {
                            $.each( conflicts.d, function( index, conflict ) {
                                $("#divResults").append( conflict.Group + ':' + conflict.Count + '<br />' );
                            });
                        } else {
                            alert( "null" );
                        }
                    },
                    complete:  function() {
                        $('#spanLoading').empty();
                    },
                    error: function(xhr, status, error) {
                        $('#spanLoading').empty();

                         var err = eval("(" + xhr.responseText + ")");
                         alert(err.Message) ;
                    }
                });
            }

        });
    </script>
</head>
<body>
    <form id="form1" runat="server"></form>

    <input type="button" id="btnGet" value="Get" /><br />
    <input type="text" id="txtValue" /> <span id="spanLoading" /><br />
    <div id="divResults" />

</body>
</html>

如果我取消注释第一个推荐的行,为什么这段代码会停止将结果打印到屏幕上?

最佳答案

这些用于全局设置。所有 ajax 调用都显示加载图像。

 $(".loading").ajaxStart(function () {
      $(this).delay(500).slideDown(200);
  });
 $(".loading").ajaxComplete(function () {
     $(this).delay(500).fadeOut(200);
 }


<div class="loading" style="display: none">
    <div>
        <img src="/img/loading.gif" title="Loading" alt="Loading" />
        Please Wait. Loading....
   </div>
</div>

关于javascript - 试图显示加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9225735/

相关文章:

javascript - 使用 Ajax 延长 PHP session 超时

javascript - jQuery 通过类名获取 ID

jQuery 检查相邻选择器

jquery - jQuery 选择器返回的对象的完整 HTML

javascript - 当我使用 Angular Material 和一些自定义代码时如何解决 Angular 应用程序中的 $event 问题

javascript - 时区 API INVALID_REQUEST

javascript - HighCharts OHLC - 我可以使用 JSON 数据提供每个点的颜色信息吗?

javascript - 去掉 while(1) 前置到 JSON 对象

javascript - 有没有更好的登录方式?

javascript - @parcel/核心 : No transformers found for static/actions. glb