Question

我想在使用getJSON通过AJAX检索数据时使用loader gif。我还没有找到合适的解决方案。我已使用此$("#loader").show();和此$("#loader").hide();，但只要页面加载就会启动它。当我点击搜索按钮时，我想让它工作。任何建议将受到高度赞赏。这是我的html代码：

<div class="container">
        <div id="wrapper">
            <section id="gallery">
                <input type="text" id="KUNDE"  placeholder="Search by name or ID." /> <di id="loader"><img src="loader.gif"/></di>
                <button id="buton" type="button" class="btn-style" value="search" onclick="find();">Search</button>
                <button id="button" class="btn-style">Clean Results</button>

            </section>
            <ul id="list"><li> </li> </ul>
        </div>

这是我的jquery代码：

<script>          
            $("#button").click(function (e) {
                $("#list").find('li').remove();
            });
            $(function () {
                $("#KUNDE").focus();
            });
            $(document).keypress(function (e) {
                if (e.which == 13) {
                    $("#buton").click();
                }
            });
            var uri = 'navisioncustomer.json';
            function find() {
                var info = $('#KUNDE').val();
                $("#loader").show();
                $.getJSON(uri)                
                    .done(function (data) {
                        var item = data.filter(function (obj) {
                            return obj.name === info || obj.ID === info;
                        })[0];
                        if (typeof item !== 'undefined' || item !== null) {
                            $("#list").append("<li>ID      = " + item.ID + "<br />Name    = " + item.name + "<br />Phone      = " + item.phone + "<br />Contact       = " + item.contact + "<br />BalanceLCY      = " + item.balanceLCY + "<br /> CreditLimitLCY       = " + item.creditLimitLCY + "</li>");
                        }
                    })               
                           .fail(function (jqXHR, textStatus, err) {
                               $('#KUNDE').text('Error: ' + err);
                           });
                $("#loader").hide();
            }
            var options = {
                url: "navisioncustomer.json",
                getValue: "name",
                list: {
                    match: {
                        enabled: true
                    }
                },
                theme: "square"
            };
            $("#KUNDE").easyAutocomplete(options);                       
        </script>

Answer 1

您可以使用JSON的.always回调，详细了解：http://api.jquery.com/jquery.getjson/

function find() {
    var info = $('#KUNDE').val();
    $("#loader").show();
    $.getJSON(uri)                
        .done(function (data) {
            var item = data.filter(function (obj) {
                return obj.name === info || obj.ID === info;
            })[0];
            if (typeof item !== 'undefined' || item !== null) {
                $("#list").append("<li>ID      = " + item.ID + "<br />Name    = " + item.name + "<br />Phone      = " + item.phone + "<br />Contact       = " + item.contact + "<br />BalanceLCY      = " + item.balanceLCY + "<br /> CreditLimitLCY       = " + item.creditLimitLCY + "</li>");
            }
        })               
        .fail(function (jqXHR, textStatus, err) {
            $('#KUNDE').text('Error: ' + err);
        })
        .always(function () { $("#loader").hide(); });
}

您的原始代码说show the loader > make request > hide the loader，并使用回调隐藏加载程序将等到结果

Answer 2

您可以在页面加载时将加载程序div设置为默认隐藏。

<div id="loader" style="display:none;"><img src="loader.gif"/></div>

然后，您在jQuery中的代码可以根据事件处理$("#loader").hide()和$("#loader").show()。

此外，在您的jsp代码中，它看起来像<di>而不是<div>

用getJSON显示loader.gif

2 个答案: