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

显示和隐藏在相同的功能似乎不起作用

1 个答案: