Korrekte Anzeige von Ergebnissen aus einer AJAX-Anfrage nach HTML

Question

Ich habe gerade eine einfache Anfrage mit der AJAX-Funktion von JQuery gemacht, die Daten abruft, wenn sie fertig sind. Das ist mein 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); 
    }) 
}); 

Es funktionierte sehr gut, es hat Daten empfangen. Das Problem ist jedoch, dass jedes Mal, wenn ich auf die Schaltfläche "Senden" klicke, um eine neue Anfrage zu erstellen, die abgerufenen Ergebnisse an das Ende der vorherigen Ergebnisse angehängt werden.

Ich weiß, es passiert, weil die $('div.placedhere').append(v.fullname).

Wie kann ich das div säubern, bevor ich anfange, eine neue Anfrage zu stellen, damit das div nur die neuesten Ergebnisse zeigt?

Ich habe Dinge wie $('div.placedhere').remove() vor $('div.placedhere').append(v.fullname) getan, aber das div zeigt nur den letzten Datensatz von den abgerufenen Daten.

Ich hatte auch versucht, die append() Funktion zu html() Funktion zu ändern, ich habe das gleiche Ergebnis, das div zeigte mir nur die letzte Aufzeichnung der Daten.

Wie kann ich das div säubern, bevor ich anfange, eine neue Anfrage zu stellen, damit das div nur die neuesten Ergebnisse zeigt?

Answer 1

Wie kann ich das Div reinigen, bevor ich anfange, eine neue Anfrage zu erstellen, so dass das div nur die neuesten Ergebnisse zeigt?

können Sie verwenden .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

Sie können es tun, indem 2-Wege

1) klar div vor Ajax-Aufruf

('.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) verwenden HTML statt APPEND (html macht div leer fügt dann neue Wert)

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