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

Question

所以我创建了一个包含动态行的 HTML 表格。每行的最后都有一个按钮。当单击特定行上的该按钮时，需要删除该行而不刷新页面。

因此，我尝试通过单击按钮时更改数据库中列的值来实现此目的。我的数据库中有一个名为“状态”的字段，最初设置为“未选中”。但是，当我单击该按钮时，将触发更新查询，从而将该特定行的“状态”字段更改为“已检查”，并删除该特定行。

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>

updateCust.php

$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');

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

Answer 1

不要使用.serialize()，它会返回name=value形式的字符串。但您的按钮没有名称或值，因此无需序列化。

将其更改为:

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

要删除该行，您可以使用:

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