[已解决]PHP中引入的JS无效

ZhihanXing · 发表于 2024-2-14 20:34:46

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

我想在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[0]);

//添加事件
for(let i=0;i<buttons.length;i++){
    buttons[i].addEventListener("click",deleteStu);
    console.log(buttons[i]);
}

//传递学生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();
}

最佳答案

月排行榜 / 总排行榜

sfqxx

2024-2-14 20:57:23

gpt3.5 没这么智能的，还是要靠你自己啊

跳转到最佳答案楼层

FishC · 发表于 2024-2-14 20:35:01

看起来你的代码有点问题。我来帮你看一下。

首先，你需要确保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[i].addEventListener("click", function() {
      // 点击按钮的操作
      // 调用deleteStu.php删除学生信息
    });
  }
}

最后，你需要在点击按钮的操作中调用deleteStu.php删除学生信息。你可以使用AJAX向deleteStu.php发送POST请求，传递学生的ID作为参数。

buttons[i].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 小助理，如未能正确解答您的问题，请继续追问。

ZhihanXing · 发表于 2024-2-14 20:44:00

FishC 发表于 2024-2-14 20:35
看起来你的代码有点问题。我来帮你看一下。

首先，你需要确保JS文件的路径是正确的，可以在浏览器的开发 ...

console.log(buttons[0]);无法返回类型是为定义

FishC · 发表于 2024-2-14 20:44:09

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[i].addEventListener('click', function() {            // 处理删除学生的逻辑            // 调用deleteStu.php            // ...        });    }}

请确保将这段JS代码放在`<script>`标签里，并且放在HTML文件的`<body>`标签的底部。这样可以保证JS代码在DOM元素加载完成后才会执行。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

ZhihanXing · 发表于 2024-2-14 20:46:01

FishC 发表于 2024-2-14 20:44
如果`console.log(buttons)`显示`buttons`未定义，那么可能是因为你的代码在DOM元素加载之前执行。在代 ...

我照你说的做了，可是仍无法达成预期效果，我猜测这和PHP嵌套有关

FishC · 发表于 2024-2-14 20:46:15

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[i].addEventListener("click", function() {
            // 调用deleteStu.php删除相应id的学生信息
            // 这里可以使用Ajax异步请求或者直接提交表单来实现
            // ... 
        });
    }
}

确保将上述代码中的注释部分替换为实际删除学生信息的代码。如果你可以提供更多代码或错误信息，我可以帮你进一步排查问题。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

ZhihanXing · 发表于 2024-2-14 20:48:38

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无法正确触发它的事件

FishC · 发表于 2024-2-14 20:48:51

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[i].addEventListener("click", function() {
    // 调用deleteStu.php删除相应id的学生信息
    // 这里可以使用Ajax异步请求或者直接提交表单来实现
    // ...
  });
}

上述代码使用了`querySelectorAll`方法，并传入了类选择器`.delete`，其中`.`代表选择class为"delete"的元素。

请确保在student.php中正确引入deleteStu.js文件并检查浏览器的控制台输出，确保buttons变量能够正确获取到delete按钮的集合。如果还是无法解决问题，请提供更多的相关代码和错误信息，我将尽力帮助你排查问题。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

ZhihanXing · 发表于 2024-2-14 20:52:40

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，请帮我修正它

FishC · 发表于 2024-2-14 20:52:50

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[i].addEventListener("click", function() { // 调用deleteStu.php删除相应id的学生信息 // 这里可以使用Ajax异步请求或者直接提交表单来实现 // ... });}这样，你就为删除按钮设置了一个id为"deleteBtn"，同时添加了一个class为"delete"。确保在student.php中引入了正确的deleteStu.js文件，并检查控制台输出，看看是否成功获取到了按钮元素。希望这次修改能够解决你的问题。如果还有其他疑问，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

sfqxx · 发表于 2024-2-14 20:57:23

gpt3.5 没这么智能的，还是要靠你自己啊

ZhihanXing · 发表于 2024-2-14 20:59:39

sfqxx 发表于 2024-2-14 20:57
gpt3.5 没这么智能的，还是要靠你自己啊

我还以为fishbot是4.0呢

等做完这个练手项目就去看node，PHP太繁琐了

ZhihanXing · 发表于 2024-2-14 21:04:56

终于搞定了

                 . "<td><button id=". $row["id"] ." class='delete'>删除</button></td>"

问题在于class前面少了一个空格，结果把class='delete'写到id属性里面去了，怪不得识别不到delete类的按钮

歌者文明清理员 · 发表于 2024-2-14 21:16:28

部分代码被识别成latex了

歌者文明清理员 · 发表于 2024-2-14 21:16:58

ZhihanXing 发表于 2024-2-14 21:04
终于搞定了问题在于class前面少了一个空格，结果把class='delete'写到id属性里面去了，怪不得识别不到delet ...

对gpt来说空不空格都一样

sfqxx · 发表于 2024-2-15 13:24:13

ZhihanXing 发表于 2024-2-14 20:59
我还以为fishbot是4.0呢等做完这个练手项目就去看node，PHP太繁琐了

4.0收费很高的，要是论坛每个人都用的话，开销很大的，gpt3.5收费相对便宜

账号		自动登录	找回密码
密码			立即注册

[已解决]PHP中引入的JS无效

马上注册，结交更多好友，享用更多功能^_^

浏览过的版块