PHP中引入的JS无效
我想在student.php文件中实现点击selectStu.php展示出来的按钮，调用deleteStu.php，从而实现删除数据库中相应id的学生信息。但是点击按钮，JS代码并没有如期运作。student.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生</title>
<link rel="stylesheet" href="style/public.css">
<link rel="stylesheet" href="style/select.css">
<script src="script/deleteStu.js" async></script>
</head>
<body>
<?php include "header.php";?>
<main>
<?php include 'addStu.php';?>
<button><a href="index.php">返回</a></button>
<?php include "selectStu.php";?>
</main>
<?php include "footer.php";?>
</body>
</html>
selectStu.php
<?php
//读取配置文件
$configFile = 'config.json';
$configMsg = file_get_contents($configFile);
//解析为数组
$config = json_decode($configMsg,true);
//连接数据库参数
$servername = $config['host'];
$username = $config['username'];
$password = $config['password'];
$database = $config['database'];
//创建连接
$conn = new mysqli($servername, $username, $password, $database);
//检测连接
if($conn->connect_error){
die("连接失败" . $conn->connect_error);
}
//echo "连接成功！";
//查询语句
$selectAll = "SELECT * FROM `student`";
$result = $conn->query($selectAll);
//输出数据
if($result->num_rows > 0){
while($row = $result->fetch_assoc()){
//输出信息到页面
echo "<table>"
. "<tr>"
. "<td>" . $row["id"] . "</td>"
. "<td>" . $row["name"] . "</td>"
. "<td>" . $row["gender"] . "</td>"
. "<td>" . $row["klass"] . "</td>"
. "<td><button id=". $row["id"] ."class='update'>修改</button></td>"
. "<td><button id=". $row["id"] ."class='delete'>删除</button></td>"
. "</tr>"
."</table>" ;
}
}
?>
deleteStu.php
//这是删除学生信息的PHP
<?php
//读取配置文件
$configFile = 'config.json';
$configMsg = file_get_contents($configFile);
//解析为数组
$config = json_decode($configMsg,true);
//连接数据库参数
$servername = $config['host'];
$username = $config['username'];
$password = $config['password'];
$database = $config['database'];
//创建连接
$conn = new mysqli($servername, $username, $password, $database);
//检测连接
if($conn->connect_error){
die("连接失败" . $conn->connect_error);
}
//获取要删除信息的id
$id = $_GET["q"];
//预处理及绑定
$stmt = $conn->prepare("DELETE FROM student WHERE id = ?");
$stmt->bind_param("i",$id);
//执行
$stmt->execute();
//关闭
$stmt->close();
$conn->close();
?>
deleteStu.js
//删除学生信息的JS
//获取元素
let buttons = document.getElementsByClassName("delete");
console.log(buttons);
//添加事件
for(let i=0;i<buttons.length;i++){
buttons.addEventListener("click",deleteStu);
console.log(buttons);
}
//传递学生id的函数
function deleteStu(){
let xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
console.log("传递成功！");
}
}
xmlhttp.open("GET","deleteStu.php?q="+this.id);
xmlhttp.send();
} 看起来你的代码有点问题。我来帮你看一下。
首先，你需要确保JS文件的路径是正确的，可以在浏览器的开发者工具中查看是否成功加载了deleteStu.js文件。
接着，你需要确保JS代码在DOM元素加载完成后执行。可以将你的JS代码放在HTML文件的最底部，或者使用window.onload事件，确保所有的元素都已经加载完毕。
window.onload = function() {
// 删除学生信息的JS
// 获取元素
let buttons = document.getElementsByClassName("delete");
console.log(buttons);
// 添加事件
for(let i=0; i<buttons.length; i++) {
buttons.addEventListener("click", function() {
// 点击按钮的操作
// 调用deleteStu.php删除学生信息
});
}
}
最后，你需要在点击按钮的操作中调用deleteStu.php删除学生信息。你可以使用AJAX向deleteStu.php发送POST请求，传递学生的ID作为参数。
buttons.addEventListener("click", function() {
let studentId = this.getAttribute("data-id"); // 假设每个按钮上都有一个data-id属性存储了学生的ID
let xhr = new XMLHttpRequest();
xhr.open("POST", "deleteStu.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 请求成功后的操作
// 可以根据服务器返回的结果来判断是否删除成功
}
};
xhr.send("id=" + studentId); // 将学生的ID作为参数发送到deleteStu.php
});
希望这些解释对你有帮助！记得检查路径和确保JS代码在DOM加载完成后执行。祝你成功！
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-2-14 20:35
看起来你的代码有点问题。我来帮你看一下。
首先，你需要确保JS文件的路径是正确的，可以在浏览器的开发 ...
console.log(buttons);无法返回类型是为定义 ZhihanXing 发表于 2024-02-14 20:44
console.log(buttons);无法返回类型是为定义
如果`console.log(buttons)`显示`buttons`未定义，那么可能是因为你的代码在DOM元素加载之前执行。在代码中，可以使用`window.onload`事件确保所有的元素都已经加载完毕，然后再执行JS代码。例如：.onload = function() { // 删除学生信息的JS // 获取元素 let buttons = document.getElementsByClassName("delete"); console.log(buttons); // 添加事件 for(let i=0; i<buttons.length; i++) { buttons.addEventListener('click', function() { // 处理删除学生的逻辑 // 调用deleteStu.php // ... }); }} 请确保将这段JS代码放在`<script>`标签里，并且放在HTML文件的`<body>`标签的底部。这样可以保证JS代码在DOM元素加载完成后才会执行。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-2-14 20:44
如果`console.log(buttons)`显示`buttons`未定义，那么可能是因为你的代码在DOM元素加载之前执行。在代 ...
我照你说的做了，可是仍无法达成预期效果，我猜测这和PHP嵌套有关 ZhihanXing 发表于 2024-02-14 20:46
我照你说的做了，可是仍无法达成预期效果，我猜测这和 ...
如果你的代码依赖于通过PHP嵌套生成的元素，那么确保在执行JS代码之前，这些元素已经被正确生成和插入到DOM中是很重要的。你可以使用`window.onload`事件或者将JS代码放置在页面底部来确保这一点。另外，请检查一下你的PHP代码是否正确生成了包含相关class的按钮元素。
例如，你的selectStu.php文件应该类似于这样：
<!-- selectStu.php -->
<!-- ... 生成其他HTML内容 -->
<button class="delete">删除</button>
<!-- ... 继续生成其他HTML内容 -->
然后，在student.php文件中引入deleteStu.js，并确保以下代码放在页面底部：
window.onload = function() {
// 删除学生信息的JS
// 获取元素
let buttons = document.getElementsByClassName("delete");
console.log(buttons);
// 添加事件
for(let i=0; i < buttons.length; i++) {
buttons.addEventListener("click", function() {
// 调用deleteStu.php删除相应id的学生信息
// 这里可以使用Ajax异步请求或者直接提交表单来实现
// ...
});
}
}
确保将上述代码中的注释部分替换为实际删除学生信息的代码。如果你可以提供更多代码或错误信息，我可以帮你进一步排查问题。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-2-14 20:46
如果你的代码依赖于通过PHP嵌套生成的元素，那么确保在执行JS代码之前，这些元素已经被正确生成和插入 ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生</title>
<link rel="stylesheet" href="style/public.css">
<link rel="stylesheet" href="style/select.css">
<script src="script/deleteStu.js" async></script>
</head>
<body>
<?php include "header.php";?>
<main>
<?php include 'addStu.php';?>
<button><a href="index.php">返回</a></button>
<?php include "selectStu.php";?>
</main>
<?php include "footer.php";?>
</body>
</html>
delete按钮在selectStu.php中，但是JS无法正确触发它的事件 ZhihanXing 发表于 2024-02-14 20:48
学生
...
如果你的delete按钮在selectStu.php中，那么确保在student.php文件中引入的deleteStu.js文件可以正确找到这些按钮元素。由于JS是在浏览器端执行的，它需要能够找到相应的DOM元素才能为其添加事件监听器。
确保你在deleteStu.js中使用合适的选择器来选择delete按钮。你可以尝试使用`document.querySelectorAll`方法，并指定一个适当的CSS选择器，以确保能够找到这些按钮。例如：
// 删除学生信息的JS
// 获取元素
let buttons = document.querySelectorAll(".delete");
console.log(buttons);
// 添加事件
for (let i = 0; i < buttons.length; i++) {
buttons.addEventListener("click", function() {
// 调用deleteStu.php删除相应id的学生信息
// 这里可以使用Ajax异步请求或者直接提交表单来实现
// ...
});
}
上述代码使用了`querySelectorAll`方法，并传入了类选择器`.delete`，其中`.`代表选择class为"delete"的元素。
请确保在student.php中正确引入deleteStu.js文件并检查浏览器的控制台输出，确保buttons变量能够正确获取到delete按钮的集合。如果还是无法解决问题，请提供更多的相关代码和错误信息，我将尽力帮助你排查问题。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-2-14 20:48
如果你的delete按钮在selectStu.php中，那么确保在student.php文件中引入的deleteStu.js文件可以正确找 ...
. "<td><button id=". $row["id"] ."class='delete'>删除</button></td>"
我想这可能是代码错误的原因，我并没有正确设置id和class，而是只设置了一个属性id，请帮我修正它 ZhihanXing 发表于 2024-02-14 20:52
. "删除"
我想这可能是代码错误的原因，我并没有正确 ...
没问题，我来帮你修正一下。假设你的删除按钮是一个`<button>`元素，并且你想为它设置一个id并添加一个class。你可以将代码修改如下：在selectStu.php中的删除按钮：<button id="deleteBtn" class="delete">删除</button>在deleteStu.js中的代码：// 删除学生信息的JS// 获取元素let buttons = document.querySelectorAll(".delete");console.log(buttons);// 添加事件for (let i = 0; i < buttons.length; i++) {buttons.addEventListener("click", function() { // 调用deleteStu.php删除相应id的学生信息 // 这里可以使用Ajax异步请求或者直接提交表单来实现 // ...});}这样，你就为删除按钮设置了一个id为"deleteBtn"，同时添加了一个class为"delete"。确保在student.php中引入了正确的deleteStu.js文件，并检查控制台输出，看看是否成功获取到了按钮元素。希望这次修改能够解决你的问题。如果还有其他疑问，请随时提问。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 gpt3.5 没这么智能的，还是要靠你自己啊{:10_254:} sfqxx 发表于 2024-2-14 20:57
gpt3.5 没这么智能的，还是要靠你自己啊
我还以为fishbot是4.0呢{:9_230:}等做完这个练手项目就去看node，PHP太繁琐了 终于搞定了 . "<td><button id=". $row["id"] ." class='delete'>删除</button></td>"
问题在于class前面少了一个空格，结果把class='delete'写到id属性里面去了，怪不得识别不到delete类的按钮 部分代码被识别成latex了 ZhihanXing 发表于 2024-2-14 21:04
终于搞定了问题在于class前面少了一个空格，结果把class='delete'写到id属性里面去了，怪不得识别不到delet ...
对gpt来说空不空格都一样 ZhihanXing 发表于 2024-2-14 20:59
我还以为fishbot是4.0呢等做完这个练手项目就去看node，PHP太繁琐了
4.0收费很高的，要是论坛每个人都用的话，开销很大的，gpt3.5收费相对便宜
页:
[1]