在同一个功能中显示和隐藏似乎不起作用

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菜鸟，所以如果这是显而易见的，请原谅我。

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();
        }
    });