如何解决更新数据库中数据的 XMLHttp 请求
我有一个包含数据的表,每个表都有一个按钮(状态),我需要从输入中获取 id、状态和当前值并将其传递给 php 文件。
if(document.querySelectorAll('.statusBtn')) {
document.querySelectorAll('.statusBtn').forEach(el=> {
el.addEventListener('click',(e)=> {
e.preventDefault();
const send= {
id: document.querySelectorAll('.statusBtn').closest('tr').querySelector('input[name=id]').value,status: document.querySelectorAll('.statusBtn').closest('tr').querySelector('input[name=status]').value,token: document.querySelectorAll('.statusBtn').closest('tr').querySelector('input[name=token]').value
}
;
const jsonString=JSON.stringify(send);
console.log(send['id']);
const xhr=new XMLHttpRequest();
xhr.open('POST','configs/appStatus.php',true);
xhr.setRequestHeader('Content-type','application/json');
xhr.onload=function() {
if (this.readyState==4 && this.status==200) {
document.querySelector(".textNotif").innerHTML=this.responseText;
var toastElList=[].slice.call(document.querySelectorAll('.toast')) var toastList=toastElList.map(function(toastEl) {
// Creates an array of toasts (it only initializes them)
return new bootstrap.Toast(toastEl) // No need for options; use the default options
}
);
toastList.forEach(toast=> toast.show()); // This show them
}
;
}
;
xhr.send(jsonString);
}
);
}
);
}
;
但是总是显示相同的id,如何正确使用closest()函数?查询通常是否正确?
HTML:
<tbody>
<?php while ($app = mysqli_fetch_assoc($applications)) { ?>
<tr class="text-center">
<td scope="row" class="text-white fw-bold <?php if($app['status'] == 1) {echo 'crossOut';}else{ echo '';}; ?>"><?= $app['id'] ?></td>
<td class="text-white fw-bold overflow-hidden <?php if($app['status'] == 1) {echo 'crossOut';}else{ echo '';}; ?>"><?= $app['name'] ?></td>
<td class="text-white fw-bold <?php if($app['status'] == 1) {echo 'crossOut';}else{ echo '';}; ?>"><?= $app['phone'] ?></td>
<td class="text-white fw-bold <?php if($app['status'] == 1) {echo 'crossOut';}else{ echo '';}; ?>"><?= $app['created_at'] ?></td>
<td>
<form action="configs/appStatus.php" method="POST">
<input type="hidden" name="token" value="<?= $_SESSION['token']; ?>">
<input type="hidden" name="id" value="<?= $app['id']; ?>">
<input type="hidden" name="status" value="<?php if($app['status'] == 1){echo '0';}else{echo '1';} ?>">
<a href="#" class="scrollOffset btn btn-<?php if($app['status'] == 1){echo 'warning';}else{echo 'success';} ?> statusBtn"> <?php if($app['status'] == 1){echo 'Resume';}else{echo 'Complete';} ?></a>
</form>
</td>
</tr>
<?php }; ?>
</tbody>
解决方法
希望以下内容对您有用。
if (document.querySelectorAll(".statusBtn")) {
document.querySelectorAll(".statusBtn").forEach((el) => {
el.addEventListener("click",(e) => {
e.preventDefault();
const id = e.target.closest("tr").querySelector('td input[name="id"]')
? e.target.closest("tr").querySelector('td input[name="id"]').value
: null;
const status = e.target
.closest("tr")
.querySelector('td input[name="status"]')
? e.target.closest("tr").querySelector('td input[name="status"]')
.value
: null;
const token = e.target
.closest("tr")
.querySelector('td input[name="token"]')
? e.target.closest("tr").querySelector('td input[name="token"]')
.value
: null;
console.log(id,status,token);
const send = {
id: id,status: status,token: token,};
// Remaining code here
});
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。