无需重新加载页面即可删除 SQL 值（AJAX、PHP）
Posted
技术标签:
【中文标题】无需重新加载页面即可删除 SQL 值（AJAX、PHP）【英文标题】：Delete SQL values without page reload (AJAX, PHP) 【发布时间】：2021-03-25 05:11:50 【问题描述】：我有一个 php 文件，它显示 SQL 表中特定 ID 的条目。现在我希望能够在不重新加载页面的情况下删除条目并显示更新的表格。
我正在尽力通过 AJAX 解决方案，但无论我选择删除哪个条目，每次只有顶部的条目被删除。
我希望有人知道为什么会发生这种情况。
这是我的show.php：
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function ()
$('.btn-primary').click(function (e)
e.preventDefault();
var belegnrdel = $('#belegnrdel').val();
var iddel = $('#iddel').val();
$.ajax
(
type: "POST",
url: "del.php",
data: "iddel": iddel, "belegnrdel": belegnrdel,
success: function (data)
$('#showtabelle').html(data);
);
);
);
</script>
</html>
<?php
// Includes
require_once '../../admin/config/database.php';
require_once '../../admin/config/dbconfig.php';
require_once './config.php';
echo "<div id='showtabelle'>";
$select = $db->query(" SELECT
belegnr,
gewicht,
id FROM
tabelle2
WHERE id='$transitnr'
ORDER BY belegnr DESC");
$nachrichten = $select->fetchAll(PDO::FETCH_OBJ);
$summe = mysqli_query($dbi, " SELECT
SUM(gewicht) AS gewicht_summe
FROM tabelle2
WHERE id='$transitnr'");
$summeausgabe = mysqli_fetch_assoc($summe);
$sum = $summeausgabe['gewicht_summe'];
echo " <div class='form'>
<h1><b>Transitnummer:</b> $transitnr</h1>";
echo " <table>
<thead>
<tr>
<th>Belegnummer:</th>
<th>Gewicht:</th>
<th>Delete:</th>
</tr>
</thead>
<tbody>";
foreach($nachrichten as $nachricht)
echo " <tr>
<td>$nachricht->belegnr<hr></td>
<td>$nachricht->gewicht kg<hr></td>
<td>
<form method='post' action='' id='contactform'>
<input type='hidden' class='form-control' id='belegnrdel' value='" . $nachricht->belegnr . "'>
<input type='hidden' class='form-control' id='iddel'' value='" . $transitnr . "'>
<button type='submit' class='btn btn-primary'>Submit</button>
</form> </td>";
echo " </tr>
</tbody>
</table>";
echo " <br><br>
<b><u><align='left'>Gesamtgewicht: $sum kg </u></b>";
echo "</div></div>";
?>
这是我的 del.php：
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function ()
$('.btn-primary2').click(function (e)
e.preventDefault();
var belegnrdel = $('#belegnrdel').val();
var iddel = $('#iddel').val();
$.ajax
(
type: "POST",
url: "del.php",
data: "iddel": iddel, "belegnrdel": belegnrdel,
success: function (data)
$('#showtabelle').html(data);
);
);
);
</script>
</html>
<?php
// Includes
require_once '../../admin/config/database.php';
require_once '../../admin/config/dbconfig.php';
require_once './config.php';
if(isset($_POST["iddel"]))
$transitnr = $_POST['iddel'];
$belegnummerdel = $_POST['belegnrdel'];
echo $belegnummerdel;
$query = " DELETE
FROM tabelle2
WHERE id='".$transitnr."' AND belegnr='".$belegnummerdel."'";
$result = mysqli_query($dbi, $query) or die ( mysqli_error($dbi));
$output = '';
$select = $db->query(" SELECT
belegnr,
gewicht,
id
FROM tabelle2
WHERE id='$transitnr'
ORDER BY belegnr DESC");
$nachrichten = $select->fetchAll(PDO::FETCH_OBJ);
$summe = mysqli_query($dbi, " SELECT
SUM(gewicht) AS gewicht_summe
FROM tabelle2
WHERE id='$transitnr'");
$summeausgabe = mysqli_fetch_assoc($summe);
$sum = $summeausgabe['gewicht_summe'];
$output .= "
<div class='form'>
<h1><b>Transitnummer:</b> $transitnr</h1>
<table>
<thead>
<tr>
<th>Belegnummer:</th>
<th>Gewicht:</th>
<th>Delete:</th>
</tr>
</thead>
<tbody>";
foreach($nachrichten as $nachricht)
$output .= " <tr>
<td>$nachricht->belegnr<hr></td>
<td>$nachricht->gewicht kg<hr></td>
<td><form method='post' action='' id='contactform'>
<input type='text' class='form-control' id='belegnrdel' value='" . $nachricht->belegnr . "'>
<input type='text' class='form-control' id='iddel'' value='" . $transitnr . "'>
<button type='submit' class='btn btn-primary2'>Submit</button>
</form> </td>";
$output .= " </tr>
</tbody>
</table>";
$output .= " <br><br>
<b><u><align='left'>Gesamtgewicht: $sum kg </u></b>";
echo $output;
?>
show.php 包含在另一个文件中，它在其中获取 $transitnr 等变量。
【问题讨论】：
id='belegnrdel' ...例如，多次输出到您的页面中。但是在 HTML 中，ID 必须是唯一的（否则根据定义，它就不是 ID！）。所以$('#belegnrdel').val() 假定页面中只能有一个belegnrdel，并返回它找到的第一个。所有其他都被视为无效。相反，您需要找到离被点击的按钮最近的那个。要么，要么只是将 ID 作为按钮的数据属性（更简单）并从那里检索它。
【参考方案1】：
您不能对多个元素使用相同的id，而是使用class，然后您可以使用.closest() 和.find() 方法获取所需的输入值，然后将其发送到您的后端。
演示代码：
$(document).ready(function()
$('.btn-primary').click(function(e)
e.preventDefault();
//get closest tr and then find inputs
var belegnrdel = $(this).closest("tr").find('.belegnrdel').val();
var iddel = $(this).closest("tr").find('.iddel').val();
console.log("belegnrdel -- " + belegnrdel + " || iddel--" + iddel)
//your ajaxcall
);
);<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id='showtabelle'>
<div class='form'>
<h1><b>Transitnummer:</b> $transitnr</h1>
<table>
<thead>
<tr>
<th>Belegnummer:</th>
<th>Gewicht:</th>
<th>Delete:</th>
</tr>
</thead>
<tbody>
<tr>
<td>12
<hr>
</td>
<td>1222
<hr>
</td>
<td>
<form method='post' action='' id='contactform'>
<!--added class-->
<input type='hidden' class='form-control belegnrdel' value='12'>
<input type='hidden' class='form-control iddel' value='1 '>
<button type='submit ' class='btn btn-primary '>Submit</button>
</form>
</td>
</tr>
<tr>
<td>1ss
<hr>
</td>
<td>somethinss
<hr>
</td>
<td>
<form method='post' action='' id='contactform'>
<!--added class-->
<input type='hidden' class='form-control belegnrdel' value='1'>
<input type='hidden' class='form-control iddel' value='2 '>
<button type='submit ' class='btn btn-primary '>Submit</button>
</form>
</td>
</tr>
</tbody>
</table>【讨论】：
以上是关于无需重新加载页面即可删除 SQL 值（AJAX、PHP）的主要内容，如果未能解决你的问题，请参考以下文章
html 使用AJAX根据邮政编码检索和显示（无需重新加载页面）人员参议员