试图显示加载图像

我也赞扬了这个问题行，以便显示工作代码：试图显示加载图像

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

为什么这个代码停止打印效果在屏幕上，如果我去掉第一赞扬脱节？

来源

2012-02-10 oshirowanen

我不能看到你的代码，这个元素：spanTrafficAlertLoading – Yorgo 2012-02-10 09:52:19

尝试不。跨度的自我封闭元素 – Yorgo 2012-02-10 09:54:08

@Yorgo，就是这样，跨度是错误的。谢谢。 – oshirowanen 2012-02-10 10:01:18

这些都是全局设置。所有的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>

来源

2012-02-10 09:58:17 Yorgo

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

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

来源

2012-02-10 09:48:27

使用ajaxSetup

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

});

来源

2012-02-10 09:51:11 Rafay

试图显示加载图像

回答

相关问题