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
Ajax reload div content on click button
提问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_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();