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

将其附加到某个元素的click()事件。

您的HTML：

<a id="button" href="#">Reload</a>

您的JavaScript：

$(document).ready( function(){
    $("#button").click( 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;
    });
});

Answer 2

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

脚本：

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

});

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

2 个答案: