Правильное отображение результатов запроса ajax на html

Question

Я просто сделал простой запрос, используя функцию AJAX JQuery, которая будет извлекать данные, когда это будет сделано с запросом. Это мой код:

('.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); 
    }) 
}); 

Он работал очень хорошо, он получал данные. Но проблема в том, что каждый раз, когда я нажимаю кнопку «Отправить», чтобы сделать новый запрос, полученные результаты добавляются к концу предыдущих результатов.

Я знаю, что это происходит потому, что $('div.placedhere').append(v.fullname).

Как очистить div до того, как я начну делать новый запрос, чтобы div показывал только самые новые результаты?

Я делал такие вещи, как $('div.placedhere').remove() до $('div.placedhere').append(v.fullname), но на div отображается только последняя запись из полученных данных.

Я также попытался изменить функцию append() на функцию html(), у меня тот же результат, div только показал мне последнюю запись данных.

Как очистить div до того, как я начну делать новый запрос, чтобы div показывал только самые новые результаты?

Answer 1

Как очистить div до того, как я начну делать новый запрос, так что div отображает только самые свежие результаты?

Вы можете использовать .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); 
    }) 
}) 

Answer 2

Вы можете сделать это на 2 пути

1) ясно ДИВ до того АЯКС вызова

('.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) использовать HTML вместо APPEND (html делает ДИВ пустым, то добавляет новое значение)

('.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); 
    }) 
});