使用jquery ajax删除表中的记录
我正在学习j查询Ajax事件。我已经使用j查询Ajax在php中插入并显示记录但是我无法删除记录我已经编写了代码但是它不能正常工作而且我不希望表再次加载。请帮助
TableName：登录
列：id，用户名，消息
comment.php
$(document).ready(function(e) { function showComment(){ $.ajax({ type:"post", url:"process2.php", data:"action=showcomment", success:function(data){ $("#flash").html(data); } }); } showComment(); //Insert records $("#Submit").click(function(){ if($(":text").val().length==0) { // $(this).next().html("Field needs filling"); $(":text").after('Field cannot be empty'); //return false; success = false; } else { var name=$("#name").val(); var message=$("#message").val(); $.ajax({ type:"post", url:"process2.php", data:"name="+name+"&message="+message+"&action=addcomment", success:function(data){ showComment(); } }); } }); $('.delete').click(function(e){ e.stopPropagation(); var deleteID = $(this).attr('name'); var row = deleteID; $.ajax({ type: "POST", url: "delete.php?deleteID=" + deleteID, data: "deleteID="+ deleteID, success: function(result){ $('#row'+row).fadeOut('fast'); } }); }); });
在你的delete.php页面中有一点bug。
$(".delete_button").click(function() { var id = $(this).attr("mid"); var dataString = 'id='+ id ; var parent = $(this).parent(); $.ajax({ type: "POST", url: "delete.php", data: dataString, cache: false, success: function() { if(id % 2) { parent.fadeOut('slow', function() {$(this).remove();}); } else { parent.slideUp('slow', function() {$(this).remove();}); } }
你在url中传递id并获得mid所以根据这个改变你的delet.php 。
以下是使用JQuery编写的整个逻辑的核心：
$(document).ready(function() { $('table#delTable td a.delete').click(function() { if (confirm("Are you sure you want to delete this row?")) { var id = $(this).parent().parent().attr('id'); var data = 'id=' + id ; var parent = $(this).parent().parent(); $.ajax( { type: "POST", url: "delete_row.php", data: data, cache: false, success: function() { parent.fadeOut('slow', function() {$(this).remove();}); } }); } }); // style the table with alternate colors // sets specified color for every odd row $('table#delTable tr:odd').css('background',' #FFFFFF'); });
让我们使用除法和规则方法找出这里发生的事情。
$(document).ready(function()
这是JQuery的function，只要文档准备就绪就会运行。 这类似于onload事件，但JQuery的function要快得多。 因此，我们希望能够在页面准备好后运行此代码。
$('table#delTable td a.delete').click(function()
如果您已经使用过CSS选择器，那么上面的行应该对您来说不是很神秘。 您可以使用相同的语法使用JQuery来定位元素。 基本上它表示在其中具有id delTable和TD的表，在单击时具有带类删除的超链接运行此函数中指定的代码。 因此，当单击具有id delTable的表中具有名为delete的类的超链接时，将执行指定的代码。
if (confirm("Are you sure you want to delete this row?"))
我们希望能够确认用户是否确实要删除一行。
var id = $(this).parent().parent().attr('id'); var data = 'id=' + id ; var parent = $(this).parent().parent();
请记住，在JQuery中，$（this）总是引用目标元素，在我们的例子中是带有类删除的超链接。 attr用于获取或设置标签的属性。 所以id变量指的是这个超链接的父节点，它是TD，然后是这个TD的父节点，即TR。 所以这里我们得到这个TR的id属性。 在HTML代码中，我们将每行的主键字段分配给这些TR以识别和删除记录。 数据变量使数据作为使用JQuery创建的ajax请求的一部分发送。 父变量引用包含目标元素的每个TR，该目标元素是具有类删除的超链接。
$.ajax( { type: "POST", url: "delete_row.php", data: data, cache: false, success: function() { parent.fadeOut('slow', function() {$(this).remove();}); } });
$ .ajax函数用于发送ajax请求。 在其参数中，类型是指请求方法，无论是POST还是GET，url是指获取ajax请求数据并返回一些响应的脚本，数据是指作为ajax请求的一部分发送的数据，类似于查询字符串form，cache控制是否为请求打开或关闭缓存，因为在IE中请求被缓存，而成功函数也是$ .ajax函数的属性，如果请求成功，则运行其中的代码。
parent.fadeOut('slow', function() {$(this).remove();});
如前所述，在我们的案例中，父母指的是TR。 fadeOut函数需要两个参数; 动画速度和执行function。 所以这一行的作用是通过使用remove（）方法将其淡出然后删除目标链接。 这样整行就消失了，在ajax请求的帮助下，数据库中的记录也被删除了。 这里我们使用了JQuery的fadeOut动画function，但有更多的动画可用。
$('table#delTable tr:odd').css('background',' #FFFFFF');
此行表示将背景样式应用于具有id delTable的表的每个奇数TR。 现在因为我们的代码在页面准备就绪时执行，因此我们的表将为每个奇数行提供备用颜色。
你可以在这里下载。
在javascript更改
var dataString = 'id='+ id ;
至
var dataString = 'mid='+ id ;
POST values不同。 像这样更改delete.php POST values 。
伙计，你的javascript代码中有以下行，在delete handler中：
var id = $(this).attr("mid");
因此，您从“删除”链接中获取不存在的“mid”属性。
在你的process.php ：
| Delete |
你应该明确地将.attr('id')分配给id变量。
另外，正如其他评论者所指出的那样，你的delete.php脚本需要一个$_POST['mid']参数，但你要向它发送一个id 。
为什么奇怪的命名呢？ 只需删除这个“中间”的东西，并在任何地方使用“id”。
顺便说一句，如果你为HTML链接分配一个自定义点击处理程序，最好在处理程序中调用event.preventDefault()作为第一件事，因为否则浏览器将尝试遵循此链接的href属性，在你的情况下 – 滚动页面到顶部。
我在这看到两个问题
- 服务器端变量在您发送
id mid调用
-
在您的情况下， parent需要指向tr指向td
$（“。delete_button”）。click（function（）{var id = $（this）.attr（“mid”）; var dataString =’mid =’+ id; var parent = $（this）.closest（’ TR’）;
$.ajax({ type : "POST", url : "delete.php", data : dataString, cache : false, success : function() { if (id % 2) { parent.fadeOut('slow', function() { $(this).remove(); }); } else { parent.slideUp('slow', function() { $(this).remove(); }); } } }); return false;
}）;
我认为问题在于变量名称。
在您的AJAX函数中，您使用了变量名称'id' 。
$(".delete_button").click(function() { var id = $(this).attr("mid"); var dataString = 'id='+ id ; // Here var parent = $(this).parent();
但是在删除过程中，你从$_POST['mid']获得它
if(isset($_POST['mid'])) // Change this to $_POST['id'] { $id = $_POST['mid']; // Change this to $_POST['id']
在delete.php而不是$_POST['mid']使用$id = $_POST['id'] $_POST['mid'] ，那么它应该可以工作。
我会这样做，更简单，更清洁：
delete.php
js脚本：
function RemoveComment(comment_id) { var row = $("table#comments tr#commentid-"+comment_id); if(row.length < 1) return false; //if element doesnt exist on our page $.post("http://yourhost/delete.php", { action: "remove_comment", id: comment_id }, function(response) { if(response == 1) row.fadeOut(); else alert(response); }); }
编辑：
$(".delete_button").click(function() { var id = $(this).attr("id"); var dataString = 'id='+ id ; var parent = $(this).parent();
我的“var row”在你的代码中是“var parent”，我只使用了不同的元素名称和ID。 你应该使用你的。
而不是干杯！