[英]Correctly displaying results from an ajax request to html
I just made a simple request using JQuery's AJAX function that will be retrieving data when it's done requesting. 我只是使用JQuery的AJAX函数提出了一个简单的请求,该请求将在完成请求后检索数据。 This is my code : 这是我的代码:
('.submit').on('click', function(e){
e.preventDefault();
var tobesent = $('input.test').val();
$.ajax({
type : 'POST',
dataType : 'json',
url : '<?php echo base_url("ajaxcontroller/submit"); ?>',
data : {'content' : tobesent}
})
.done(function(data){
$.each(data, function(k, v){
$('div.placedhere').append(v.fullname);
})
})
.fail(function(data){
console.log(data);
})
});
It worked very nice, it did receiving data. 它工作得非常好,它确实接收了数据。 But the problem is, each time I click the submit button to make a new request, the retrieved results get appended to the end of the previous results. 但是问题是,每次我单击“提交”按钮提出新请求时,检索到的结果都会附加到先前结果的末尾。
I know it happens because the $('div.placedhere').append(v.fullname)
. 我知道它发生是因为$('div.placedhere').append(v.fullname)
。
How can I clean the div before I start making a new request so the div only shows the newest results? 在开始发出新请求之前,如何清洁div,以便div仅显示最新结果?
I've done things like $('div.placedhere').remove()
before $('div.placedhere').append(v.fullname)
but the div only shows the last record from the retrieved data. 我已经在$('div.placedhere').append(v.fullname)
之前完成了$('div.placedhere').remove()
,但是div仅显示检索到的数据中的最后一条记录。
I had also tried to change the append()
function to html()
function, I've got the same result, the div only showed me the last record of the data. 我还尝试将append()
函数更改为html()
函数,我得到了相同的结果,div仅向我显示了数据的最后一条记录。
How can I clean the div before I start making a new request so the div only shows the newest results? 在开始发出新请求之前,如何清洁div,以便div仅显示最新结果?
How can I clean the div before I start making a new request so the div only shows the newest results? 在开始发出新请求之前,如何清洁div,以便div仅显示最新结果?
You can use .empty()
您可以使用.empty()
var div = $("div.placedhere"); // cache selector outside of `click` handler
.done(function(data) {
div.empty(); // remove child nodes of `div.placedhere`
$.each(data, function(k, v){
div.append(v.fullname);
})
})
You can do it by 2 way 你可以通过两种方式做到
1)clear div before ajax call 1)在ajax调用之前清除div
('.submit').on('click', function(e){
e.preventDefault();
$('div.placedhere').empty(); //clear div before ajax call
var tobesent = $('input.test').val();
$.ajax({
type : 'POST',
dataType : 'json',
url : '<?php echo base_url("ajaxcontroller/submit"); ?>',
data : {'content' : tobesent}
})
.done(function(data){
$.each(data, function(k, v){
$('div.placedhere').append(v.fullname);
})
}).fail(function(data){
console.log(data);
})
});
2)use HTML
instead of APPEND
( html
makes div empty then appends new value) 2)使用HTML
代替APPEND
( html
使div为空然后附加新值)
('.submit').on('click', function(e){
e.preventDefault();
var tobesent = $('input.test').val();
$.ajax({
type : 'POST',
dataType : 'json',
url : '<?php echo base_url("ajaxcontroller/submit"); ?>',
data : {'content' : tobesent}
})
.done(function(data){
$.each(data, function(k, v){
$('div.placedhere').html(v.fullname); // use `html` like this
})
}).fail(function(data){
console.log(data);
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.