jQuery：在另一个 jquery 操作后刷新 div？答案

【问题标题】：jQuery: Refresh div after another jquery action?jQuery：在另一个 jquery 操作后刷新 div？
【发布时间】：2010-12-02 01:40:34
【问题描述】：

如何在另一个 jquery 操作后刷新元素（div、类）？

我有这个操作正在从数据库中删除一条记录，我需要刷新 div，它也正在从数据库中获取一些其他数据...

这里是代码：

$(function() {
    $(".delete").click(function() {
        var commentContainer = $(this).parent();
        var id = $(this).attr("id");
        var string = 'id='+ id ;

        $.ajax({
           type: "POST",
           url: "delete.php",
           data: string,
           cache: false,
           success: function(){
               commentContainer.slideUp('slow', function() {$(this).remove();});
           }
         });

        return false;
    });
});

感谢大家的帮助！ :)

【问题讨论】：

您要刷新哪个元素？该元素首先如何从数据库中获取数据？
你为什么不把它合并到一个 ajax 调用中呢？删除记录后，服务器返回 HTML 以填充您选择的元素。 IMO 更有意义。

标签： jquery refresh

【解决方案1】：

在 AJAX 调用期间，您可以使用 success 函数在成功调用后运行命令。您的代码中已经有一个函数，因此更新该函数很简单。您要更新的第二个 div 也可以使用 AJAX 加载。

 $.ajax({
  //other options
  success:function(){
       commentContainer.slideUp('slow', function() {$(this).remove();});
       $('#otherdiv').load('urlofpagewith info.php');
  }

 });

【讨论】：

是的，这就是我想要的！实际上就在不久前，我在其他地方找到了 .load 东西，只是没有注意到将它放在哪里.. :) 谢谢！

【解决方案2】：

只需公开成功回调的data 参数并替换任何元素的内容，在本例中为 div id="someDiv":

$.ajax({
   type: "POST",
   url: "delete.php",
   data: string,
   cache: false,
   success: function(data){
    commentContainer.slideUp('slow', function() {$(this).remove();});
    $('#someDiv').html(data);
  }
 });

更多信息请参见ajax options。

另外，看在上帝的份上，不要使用类型名作为变量名，这真的很可怕和可怕的做法，即使string 不是reserved word in Javascript（使用data: str 或data: dataString 代替）。

【讨论】：

【解决方案3】：

为什么不添加一个在第一个 ajax 成功后进行刷新的函数（假设你不能将两者结合成一个效率更高的 ajax 请求）。


...
function doRefresh_ofAnotherDiv() {
   $.ajax({
      type: ...,
      url: ...,
      data: ...,
      cache: ...,
      success: function(){
         // updateAnotherDiv();
      }
   });
}
...
$.ajax({
   type: "POST",
   url: "delete.php",
   data: string,
   cache: false,
   success: function(){
      commentContainer.slideUp('slow', function() {$(this).remove();});
      doRefresh_ofAnotherDiv();
   }
});
...

希望这会有所帮助。

【讨论】：

【解决方案4】：

几乎所有的 jquery 函数都有使用回调函数的能力。每当原始操作完成执行时，都会调用它们。所以这可以与任何函数一起使用，而不仅仅是 ajax。

【讨论】：