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

Correctly displaying results from an ajax request to html

本文关键字：html 结果 请求 ajax 显示      更新时间：2023-09-26

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

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

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

在开始提出新请求之前，如何清理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);
   })
 })

你可以通过2种方式做到这一点

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）使用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);
  })
});
相关文章：