jquery ajax删除_使用jQuery的动画AJAX记录删除

jquery ajax删除

I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with jQuery JavaScript.

我非常喜欢WordPress删除个别文章的方法。 单击删除链接，菜单项设置为红色，然后消失。 这是使用jQuery JavaScript实现该功能的方法。

View Demo 观看演示

PHP-内容和标题 (The PHP - Content & Header)

The following snippet goes at the top of the page:

以下代码段位于页面顶部：

if(isset($_GET['delete'])) {
	$result = mysql_query('DELETE FROM my_table WHERE item_id = '.(int)$_GET['delete'],$link);
}

The following is used to display the records:

以下用于显示记录：

$result = mysql_query('SELECT * FROM my_table ORDER BY title ASC',$link);
while($row = mysql_fetch_assoc($result)) {
	echo '
   
   

				
    
    Delete
				
    
    ',$row['title'],'
			
   
   
';
}

jQuery JavaScript (The jQuery JavaScript)

$(document).ready(function() {
	$('a.delete').click(function(e) {
		e.preventDefault();
		var parent = $(this).parent();
		$.ajax({
			type: 'get',
			url: 'jquery-record-delete.php',
			data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''),
			beforeSend: function() {
				parent.animate({'backgroundColor':'#fb6c6c'},300);
			},
			success: function() {
				parent.slideUp(300,function() {
					parent.remove();
				});
			}
		});
	});
});

For every link, we add a click event that triggers the AJAX request. During the request, we transition the containing element to a red background. When the AJAX request returns a "success" response, we slide the element off of the screen.

对于每个链接，我们添加一个点击事件来触发AJAX请求。 在请求期间，我们将包含元素转换为红色背景。 当AJAX请求返回“成功”响应时，我们将元素滑出屏幕。

View Demo 观看演示

How would you use this? Share!

您将如何使用它？ 分享！

翻译自: https://davidwalsh.name/animated-ajax-jquery

jquery ajax删除