在同一功能中顯示並隱藏似乎不起作用

Question

我搜索了周圍，但無法找到解決方案。我確定它很簡單，但解決方案是躲避我：/

我有一個函數分配給Html按鈕輸入.click（）。除了顯示和隱藏不按正確順序觸發外，該功能中的所有內容都可以正常工作。我的小微調圖像只出現在函數運行的結尾，看起來不再隱藏。

如果不是很明顯，我試圖實現的是顯示微調圖像，直到返回php輸出。

<div id="results" style="padding: 20px;"></div> 

header date <input type="text" id="headerDate" name="headerDate" size="15" value="20130101" /> 
#rows <input type="text" id="numRows" name="numRows" size="15" value="10000" /> 
<input type="button" value="GO" id="goButton" /> 
<img id="spinner" style="display: none;" src="images/spinner.gif" border="0" width="30" height="30" alt="loading..." /> 

<script> 
    $('#goButton').click(function() { 
     $('#spinner').show(); 

     $.ajax({ 
      url: 'do_something.php', 
      type: 'POST', 
      data: { 'headerDate': $('#headerDate').val(), 'numRows': $('#numRows').val() }, 
      dataType: 'html', 
      success: function(data) { 
       $('#results').html(data); 
      }, 
      error: function() { 
       $('#results').html("Something went wrong!"); 
      } 
     }); 

     $('#spinner').hide(); 
    }); 
</script> 

我是一個jQuery noob，所以請原諒我，如果這是顯而易見的。

Answer 1

你需要把它的成功或失敗

$.ajax({ 
     url: 'do_something.php', 
     type: 'POST', 
     data: { 'headerDate': $('#headerDate').val(), 'numRows': $('#numRows').val() }, 
     dataType: 'html', 
     success: function(data) { 
      $('#results').html(data); 

      $('#spinner').hide(); 
     }, 
     error: function() { 
      $('#results').html("Something went wrong!"); 

      $('#spinner').hide(); 
     } 
    });