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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19889100/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 00:45:14  来源:igfitidea点击:

Ajax reload div content on click button

javascriptajaxjquery

提问by Abude

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>

回答by Ashkan Mobayen Khiabani

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

回答by user2511140

just use

只是使用

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

回答by Rory McCrossan

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

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