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

Posted 2023-02-22

【中文标题】jQuery：在另一个 jquery 操作后刷新 div？

【英文标题】：jQuery: Refresh div after another jquery action?

【发布时间】：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 更有意义。

【参考方案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。