javascript - 使用ajax向服务器发送数据的问题
问题描述
我已经编写了一个代码,它从 HTML 中的数据库创建一个表,并且我希望在每一行上都有删除和确认按钮。我把整行放在<form method="post">
属性中。在 JavaScript 文件中,我读取电子邮件的值并使用 ajax 将其发送到服务器,然后服务器执行操作。问题是当我想删除一行或使用每一行的按钮确认它时,即使我单击另一行的按钮,它也仅适用于第一行。我用过document.getElementById('email')
,但它总是返回第一行。这是我的html代码:
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>نام کاربر</th>
<th>ایمیل</th>
<th>تایید</th>
</tr>
</thead>
<tbody>
<?php
while ($users = mysqli_fetch_assoc($result_user)) {
?>
<tr>
<form name="ajax-demo" id="ajax-demo" method="get">
<td><?php echo $users['name']?></td>
<td><?php echo $users['email']?></td>
<input id="email" type="hidden" name="email" value="<?php echo $users['email']?>">
<td>
<div class="btn-group">
<button onclick="confirmUser()" id="btnConfirm" type="submit" class="btn btn-success btn-flat">
تایید
</button>
<button type="button" class="btn btn-success btn-flat dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a onclick="deleteUser()" id="btnDelete">حذف</a>
</li>
</ul>
</div>
</td>
</form>
</tr>
<?php }?>
</tbody>
</table>
和 javaScript 代码:
<script>
function confirmUser() {
var email = document.getElementById("email").value;
var xhr;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var data = "email=" + email;
xhr.open("POST", "confirm_user.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);
xhr.onreadystatechange = display_data;
function display_data() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
//alert(xhr.responseText);
document.getElementById("txtHint").innerHTML = xhr.responseText;
} else {
alert('There was a problem with the request.');
}
}
}
}
function deleteUser() {
var email = document.getElementById("email").value;
var xhr;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var data = "email=" + email;
xhr.open("POST", "confirm_user_delete.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);
xhr.onreadystatechange = display_data;
function display_data() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
//alert(xhr.responseText);
document.getElementById("txtHint").innerHTML = xhr.responseText;
} else {
alert('There was a problem with the request.');
}
}
}
}
</script>
最后是我的 confirm_user.php 代码:
<?php
$conn = mysqli_connect('localhost', 'root', 'root', 'my_scheme');
if (!$conn) {
die('Connection failed ' . mysqli_error($conn));
}
if (isset($_POST['email'])) {
$email_user = $_POST['email'];
$sql = "UPDATE my_scheme.tbl_user SET active='true' WHERE email='".$email_user."'";
if (mysqli_query($conn, $sql)) {
echo '<h5 class="headline text-green">کاربر با موفقیت تایید شد!</h5>';
}else {
echo "Error: ". mysqli_error($conn);
}
exit();
}
else {
echo "failed";
}
confirm_user_delete.php 代码与前面的代码类似。请帮我解决这个问题。谢谢你
解决方案
如果我理解你的问题是正确的。您有从数据库结果创建表行的数据库条目。但即使您单击第二个元素,它总是会从表格行中获取第一封电子邮件的 ID。
原因:你可以简单地这样做
<?php
$email = 'myemail.com';
?>
<button onclick="confirmUser('<?php echo $email; ?>')"class="btn btn-success btn-flat"> Delete Me </button>
<script>
function confirmUser(email)
{
console.log("The email to delete is: " + email);
}
</script>
推荐阅读
- python - 从嵌套装饰器中获取装饰函数
- javascript - Wordpress 5.5.6 Publisher 主题设置 javascript 错误 - 未定义保险丝
- ios - Xamarin Forms 应用程序在后台提取期间崩溃
- javascript - $scope 没有更新
- botframework - MS Teams 日历深层链接:如何删除 Microsoft Teams 会议部分
- node.js - 如何在异步函数中返回axios的响应
- bash - systemd ExecStart 中的参数
- python - 使用 python/cartopy 设置 plt.colorbar 范围
- c# - Visual Studio 2019 - 通过数据网关连接到 SQL Server
- java - 无法自动接线。找不到“MyUserDetailsService”类型的 bean