Javascript 如何使用ajax更新数据库中的记录并在单击按钮时删除表行？

因此，我创建了一个带有动态行的HTML表。每行的末尾都有一个按钮。单击特定行上的按钮时，需要删除该行而不刷新页面

所以我试图通过单击按钮更改数据库中列的值来实现这一点。我的数据库中有一个名为“status”的字段，最初设置为“unchecked”。但当我单击按钮时，将触发更新查询，从而将该特定行上的“状态”字段更改为“已检查”，并删除该特定行

newCust.php

<table class="table table-bordered table-striped table-light table- 
responsive text-nowrap">
<thead class="thead-dark">
<tr>
<th class="col"><label> nID</label></th>
<th class="col"><label> CUSTOMER NAME </label></th>
<th class="col"><label> ADDRESS </label></th>
<th class="col"><label> CITY </label></th>
<th class="col"><label> STATUS </label></th>
</tr>
</thead>
<tbody>

<?php
<!-- GETTING DATA FROM THE TABLE WHERE STATUS FIELD IS UNCHECKED -->
$query = "select * from mx_newcustomer where status = 'unchecked'";
$result = mysqli_query($db,$query);
while($res = mysqli_fetch_array($result)){
$nID = $res['nID'];
?>
<tr>
<td><?php echo $nID;  ?></td>
<td><?php echo $res['customername'];  ?></td>
<td><?php echo $res['address'];  ?></td>
<td><?php echo $res['city'];  ?></td>
<td><button type="button" id="button<?php echo $nID;  ?>" class="btn btn- 
dark" >Ok</button></td>
</tr>

<script>
<!-- AJAX TO UPDATE RECORDS IN THE DATABASE-->
$(document).ready(function () {
$("#button<?php echo $nID ?>").click(function(){
alert('Test');
jQuery.ajax({
type: "POST",
url: "updateCust.php",

<--TRYING TO 
PASS THE CLICKED BUTTON ID. I BELIEVE THIS IS WHAT I'M DOING WRONG-->
data:  {"nID":$('#button<?php echo $nID ?>').serialize()}, 
success: function(response)
{
 alert("Record successfully updated");
}
});
});
});

</script>

$db = mysqli_connect("credentials");
$nID = $_POST['nID'];
$query = "UPDATE mx_newcustomer SET status = 'checked' WHERE nID = 
'$nID'";
$res = mysqli_query($db, $query);

error_reporting(E_ALL);
ini_set('display_errors','On');

我没有收到任何错误，但是更新查询也没有被触发。预期结果是删除已单击其按钮的表行，而不刷新页面。

不要使用

.serialize（）

，它以

name=value

的形式返回字符串。但是您的按钮没有名称或值，因此没有要序列化的内容

将其更改为：

data:  {"nID": <?php echo $nID ?>}, 

数据：{“nID”：}，

要删除该行，可以使用：

success: function() {
    $("#button<?php echo $nID?>").closest("tr").remove();
}

success:function（）{
$（“#按钮”）.closest（“tr”）.remove（）；
}

可能没有错误（您知道），但调试时会发生什么？这段PHP代码是否产生了您期望的HTML和JavaScript？是否调用了按钮的单击处理程序？是否发出了AJAX请求？它是否包含您期望的数据？服务器的响应是什么？在服务器端代码中，

$query

的运行时值是多少？mysqli\u查询的结果是什么？你可以在这里进行很多调试。你在浏览器的开发工具中看过请求/响应吗？我在chrome上调试过，但控制台上什么都没有。虽然我收到一个响应，“记录已成功更新”。Hi进行了更改，现在数据库中的查询正在更新。非常感谢。但单击按钮时不会删除表行，但刷新时会删除表行。请也帮我一下。对不起，

closest（“td”）

应该是

closest（“tr”）

来删除整行，而不仅仅是一个单元格。您好，非常感谢Barmar。代码正在运行。谢谢。