Question

我已经推荐了问题行，因此请显示工作代码：

<%@ 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>

如果我取消注释第一个推荐的输出线，为什么此代码会将结果停止打印到屏幕上？

Answer 1

您可以使用ajax请求的beforeSend和complete个事件。

 $.ajax({
    beforeSend:function(data){
           //Show Image
    },
    complete: function(data){
           //Hide Image
    },
    //rest of your code
 });

Answer 2

使用ajaxSetup

$.ajaxSetup({
beforeSend:function(){
//show loading div
},
complete:function(){
//remove the loading div
}

});

Answer 3

这些用于全局设置。所有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>

试图显示加载图像

3 个答案: