javascript - Ajax 在单击按钮上重新加载 div 内容

Question

这个想法是：我有一个主 DIV，其中包含汽车信息的迷你 div，每行分为两个，我从 DB 中得到一个查询，我希望在按下该按钮时重新加载该主要内容，其中包含来自DB，有可能吗？请指教。

代码如下所示：

<div class="SearchBlocks">
    <div class="row">
        <div class="car_section">INFO</div>
        <div class="car_section">INFO</div>
        <div class="car_section">INFO</div>
        <div class="car_section">INFO</div>
        ......

    </div>
    <h2 class="load_more"><a id="more_link" href="#">Load more <i class="icon-custom_arrow"></i></a></h2>
</div>

Answer 1

    function reload(url){
       $.get(url, function(data){      // $.get will get the content of the page defined in url and will return it in **data** variable 
            $('#row').append(data);
       }
    }

$('#more_link').click(function(e){ 
        e.preventDefault();
        var url = 'http://example.com/somepage.html';
        reload(url);  // this calls the reload function
});

Answer 2

您没有显示用于生成 AJAX 请求的确切代码，但是一般模式将是这样的，其中更新逻辑被提取到它自己的函数中，该函数在页面加载时调用，并且点击#reload_cars按钮。

function getData() {
    $.ajax({
        url: 'yoururl.foo',
        success: function(data) {
            $('#row .car_section').remove();
            $('#row').append(data);
        }
    });
}
$('#reload_cars').on('click', getData);
getData();

Answer 3

只需使用

    function refreshDiv(){
       var container = document.getElementById("divId");
       var content = container.innerHTML;
       container.innerHTML= content;
    }