javascript - 如何通过单击按钮刷新 div？

Question

我有这个ajax调用。 打开时它会填充我的页面。 如何通过单击按钮再次重新加载新查询？

我试图自己解决这个问题，但我做不到。

脚本:

$(document).ready(function() {
    $("#loading").show();
    $.getJSON("listapps.php",function(data) {
        $.each(data, function(i,data) {
            data.title = data.title.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-').replace(/-+/g,'-');
            if (data.title =='' | data.title =='-') {
                data.title = 'App';
            }
            var div_data = "<div ><a href='"+data.title+"-"+data.appID+"'><img src='"+data.icon+"'></img></a></div>";
            $(div_data).appendTo("#iconsfree");
        });
        $("#loading").hide();
    });
    return false;
});

HTML:

<div id='loading'>Loading...</div>
<div id='iconsfree'></div>

Answer 1

创建一个方法，在打开页面和单击按钮时调用它。

脚本:

$(document).ready(function() { 

    function refresh(){
        $("#loading").show();
        $.getJSON("listapps.php",function(data) {
            var div_data = '';
            $.each(data, function(i,data) {
                data.title = data.title.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-').replace(/-+/g,'-');
                if (data.title =='' | data.title =='-') {
                    data.title = 'App';
                }
                div_data += "<div ><a href='"+data.title+"-"+data.appID+"'><img src='"+data.icon+"'></img></a></div>";
            });
            $("#iconsfree").html(div_data);
            $("#loading").hide();
        });
    }

    // call the method on button click:
    $(document).on('click', '#button', function(e){
        e.preventDefault();
        refresh();
    });

    // call the method when page is opened:
    refresh();

});