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

时间:2019-05-09 11:39:03

标签: javascript php jquery ajax

因此,我创建了带有动态行的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');

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

1 个答案:

答案 0 :(得分:1)

不要使用.serialize(),它会以name=value的形式返回一个字符串。但是您的按钮没有名称或值,因此没有要序列化的内容。

将其更改为:

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

要删除该行,可以使用:

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