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();     
      });

GET后刷新几个Div

3 个答案: