javascript - 正确显示 ajax 请求到 html 的结果

Question

我刚刚使用 JQuery 的 AJAX 函数发出了一个简单的请求，该函数将在请求完成后检索数据。这是我的代码:

('.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').append(v.fullname) 之前做过类似 $('div.placedhere').remove() 的事情> 但 div 只显示检索到的数据中的最后一条记录。

我还尝试将 append() 函数更改为 html() 函数，我得到了相同的结果，div 只显示了最后一条记录数据。

如何在开始发出新请求之前清理 div，以便 div 只显示最新结果？

Answer 1

How can I clean the div before I start making a new request so the div only shows the newest results?

您可以使用.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);
   })
 })