GET后刷新页面上的几个Div

Question

在我的页面上，我有一个图像列表。对于每个图像，您都会获得一组控件，例如删除和编辑。删除链接如下：

<a href='delete.php?imageid=xx'>Delete Image</a>

我没有在页面上设置表单，所以当用户单击删除图像时，它会转到 delete.php 页面，从数据库中删除图像，然后返回上一页。当用户单击删除时，我正在尝试做什么，它会删除图像并刷新 DIV，而不必转到 delete.php 页面，然后返回原始页面，我知道这涉及 AJAX/Jquery ，我只是不知道如何开始，因为我看过的所有内容都需要一个表格。

我怎样才能使用 jquery 完成这项工作？

谢谢。

Answer 1

可能您在每个图像周围都有删除按钮。因此，单击您需要的delete 按钮：

$('a[href^="delete.php"]').click(function() { // for all delete buttons
    var url = $(this).attr('href'); // ge delete image url
    var $img = $(this).parent(); // find image container element
    $.post(url, function() { // make call to delete image
       $img.remove(); // delete image on success call
    });
    return false;
});

如果你有这样的标记：

<div>
    <a href='delete.php?imageid=xx'>Delete Image</a>
    <img src='...' />
</div>

在这种情况下，只有在向delete.php 请求成功时才会删除图像，并且您不需要在页面上进行任何刷新。

您可以使用// find image container element 中的代码来找到要删除的正确元素。

Answer 2

您可以在图像、按钮或链接上收听clicks ....

$(myimage).click(function() {
  $.get('delete.php', function(data) {
    // this is processed once the delete.php has been processed
    postProcess();
  });
});

这是监听点击，然后通过 get() 函数将数据发送到服务器，并在完成时运行一个名为 postProcess() 的方法

Answer 3

首先，我会给你所有的删除链接一个类，这样它们就很容易选择。

<a href='delete.php?imageid=xx' class="delete">Delete Image</a>

那么对于 javascript

$(function(){ 
    $('.delete').click(function(e){ 
      var url = $(this).attr('href');   
      $.get(url, function(){ 
          $('yourdivid').load('put url here'); // this will load div with new content
      });  
      e.preventDefault(); 
    }); 
}); 

编辑：假设您要刷新页面上有一个 div

<div id="images"> 

</div> 

然后你可以通过多种方式刷新

$('#images').load('http://yoursite.com/show_images #images'); // this would be the current pages url 

上面的代码将获取页面然后提取图像 div 并替换当前页面的图像 div。

您还可以使用已有的视图部分刷新当前 div（这仅包含 div 的 html，不包含其他 html）

$('#images').load('http://yoursite.com/show_image_div'); // this is the partial views url. This only sends back html for the div and no other html. 

请记住刷新 div 的含义，您当前拥有的任何事件处理程序都将不再工作，您必须使用 live 或 delegate。

更好的选择是从 div 中删除图像，而不是刷新 div。

      $.get(url, function(){ 
          $image_div.remove();     
      });