Javascript 如何用jQUery实现CRUD操作？_Javascript_Php_Jquery_Crud

Javascript 如何用jQUery实现CRUD操作？

javascript php jquery

Javascript 如何用jQUery实现CRUD操作？,javascript,php,jquery,crud,Javascript,Php,Jquery,Crud,我刚刚用CRUD创建了一个经典的用户列表，其中只有PHP、bootstrap和MySQL。一切正常但是当我尝试使用jQuery来避免在进行操作时刷新页面时，我遇到了一些无法解决的错误我可以创建/插入新用户，没有问题，但删除只能工作一次。我可以通过单击按钮删除记录，它将从页面上的列表和数据库中消失，并显示新列表，而不显示刚刚删除的用户。但是当我试图删除列表中的另一个用户时，什么也没有发生。引导模式总是加载上一个已删除用户的数据我认为这是重置变量的问题，但我无法找到我必须做的事情以下是操作中

我刚刚用CRUD创建了一个经典的用户列表，其中只有PHP、bootstrap和MySQL。一切正常

但是当我尝试使用jQuery来避免在进行操作时刷新页面时，我遇到了一些无法解决的错误

我可以创建/插入新用户，没有问题，但删除只能工作一次。我可以通过单击按钮删除记录，它将从页面上的列表和数据库中消失，并显示新列表，而不显示刚刚删除的用户。但是当我试图删除列表中的另一个用户时，什么也没有发生。引导模式总是加载上一个已删除用户的数据

我认为这是重置变量的问题，但我无法找到我必须做的事情

以下是操作中涉及的文件：

这只是index.php的一个摘录，其中列表/表是重复的

<?php
require_once 'database.php';
include 'crud-read.php';
include 'modal-delete-user.php';
?>
<html>
        </div>
          <?php echo $output; ?>
      </div>

  <?php include 'scripts.php';?>
</html>

modal-delete-user.php这是确认删除的警报模式的一部分

<!-- Modal Delete User -->
      <div class="modal-body">
        <form id="form-delete-user">
          <input id="delete-user-id" name="delete-user-id" type="text">

        <p>
          Really delete?
          <strong>
            <span id="delete-user-forename"></span>
            <span id="delete-user-name"></span>
          </strong>?
        </p>
        <p>It cannot be undone!</p>

      </div>

        <button class="btn btn-danger" id="delete-user-submit-button" type="input">
          <i class="fas fa-trash-alt fa-2x" data-toggle="tooltip" id="del-confirm-info"
            title="Exclude user"></i>
        </button>
      </form>

crud-read.php用于从数据库中选择用户，并在index.php上回显用户列表

<?php
// Read users
$read_query = "SELECT * FROM users ORDER BY id DESC";
$stmt = $conn->prepare($read_query);
$stmt->execute();

$count = 1;
$output .='<tbody>';

while($row = $stmt->fetch(PDO::FETCH_OBJ)) {
  $output .=
    '<tr>
      <td>'.$count.'</td>
      <td>'.$row->forename.'</td>
      <td>'.$row->name.'</td>
      <td><a class="link-edit-user" id="' . $row->id . '" name="' . $row->id . '" href="#">EDIT</a></td>
      <td>
        <a class="link-delete-user text-danger"
          data-target="#modal-delete-user"
          data-id="'.$row->id.'"
          data-forename="'.$row->forename.'"
          data-name="'.$row->name.'"
          data-toggle="modal" href="#">
            <i class="far fa-trash-alt fa-xs"></i>
        </a>
      </td>
    </tr>';

  $count++;
}

$output .='</tbody>';

crud-delete.php

scripts.php当我们单击delete按钮时，它会打开一个请求删除确认的模式。单击“确定”时，它将执行crud-delete.php问题：删除用户/记录后，它将从列表中消失。但是，当我再次尝试执行相同的操作时，模式会打开，显示第一个删除用户的数据，但id不是来自第一个删除用户，也不是来自要删除的新单击用户

<!-- jQuery -->
<script>
$(document).ready(function() {
    // Confirm user deletion
    $(".link-delete-user").click(function() {
        event.preventDefault();
        var db = $(this).attr('data-id');
        $("#delete-user-id").val(db);
        $("#delete-user-forename").text($(this).attr('data-forename'));
        $("#delete-user-name").text($(this).attr('data-name'));
        $("#modal-delete-user").modal("show");
  });
    // Delete user
    $("#form-delete-user").on('submit', function() {
        event.preventDefault();
        $.ajax({
            url: "crud-delete.php",
            type: "POST",
            data: $('#form-delete-user').serialize(),
            success: function(resp) {
                $('#form-delete-user')[0].reset();
                $('#modal-delete-user').modal('hide');
                $('#table-users').html(resp);
      }
    });
  });

});
</script>

有什么提示吗？

提交按钮只工作一次的问题是，当您在加载时添加事件侦听器时，它会连接到屏幕上的每个匹配按钮。但重新加载列表后，将显示新按钮

只需将事件侦听器更改为：

$(document).on("click",".link-delete-user", function() {

$(document).on("submit","#form-delete-user", function() {

这个问题属于TMI范畴。考虑发布一个最小的，完整的，可验证的例子MCVE，并且你有一个更好的机会来帮助一个特定的问题。谢谢你的评论@ YVESLBORG。我想最好把一切都展示出来。我应该编辑它还是创建一个新问题？@YvesLeBorg只允许CRUD操作中涉及到代码的关键部分。希望它现在符合规则。请给我一些建议。

$(document).on("click",".link-delete-user", function() {

$(document).on("submit","#form-delete-user", function() {