Ajax在点击按钮上重新加载div内容

The idea is: i have a main DIV with content mini divs of cars info divided two per row, that i'm getting with a query from DB, i want when pressing that button to make reload of that main content with new content from the DB, is that possible to do ? please advise.

这个想法是:我有一个主要的DIV与内容迷你div汽车信息分为每行两个,我得到一个DB的查询,我想按下该按钮,重新加载该主要内容与来自的新内容DB,这可能吗?请指教。

code looks like this:

代码看起来像这样:

<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>

3 个解决方案

#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
});

#2

You haven't shown the exact code you're using to generate your AJAX request, however the general pattern will be something like this, where the update logic is extracted in to it's own function which is called both on load of the page, and click of the #reload_cars button.

您没有显示用于生成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();

#3

just use

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