使用 getJSON 显示 loader.gif

Question

我想在使用 getJSON 通过 AJAX 检索数据时使用加载程序 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

Showing loader.gif with getJSON

javascript

jquery

getjson