jQUery如何实现CRUD操作？

Question

我刚刚使用只有 PHP、(bootstrap) 和 MySQL 的 CRUD 创建了一个（经典）用户列表。一切正常。

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

我能够 create/insert 新用户没有问题，但删除只有效一次。我可以通过单击按钮删除一条记录，它从页面上的列表和数据库中消失，它显示新列表，没有刚刚删除的用户。但是当我尝试删除列表中的另一个用户时，什么也没有发生。并且 bootstrap 模态始终加载之前删除的用户的数据。

我认为这与重置变量有关，但我无法找到我必须做的事情。

这里是操作涉及的文件：

只是index.php的摘录，其中回显了list/table。

<?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（这用于 select 数据库中的用户并回显 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

<?php
require_once 'database.php';

// Delete user
$delete_query = "DELETE FROM users WHERE id = ?";
$stmt = $conn->prepare($delete_query);

$id = $_POST['delete-user-id'];

$stmt->bindParam(1, $id, PDO::PARAM_INT); // id is an integer, that's why PARAM_INT

$stmt->execute();

// Read remaining users and echo table on the page
include 'crud-read.php';
echo $output;

scripts.php（当我们点击删除按钮时，它会打开一个模式，要求删除确认。当点击确定时，它会执行 crud-delete.php）问题：删除 user/record 后它从列表中消失。但是当我再次尝试执行相同的操作时，模式打开时会显示第一个删除用户的数据，但是 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>

有什么建议吗？

Answer 1

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

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

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

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

jQUery如何实现CRUD操作？

How to implement CRUD operation with jQUery?

javascript

php

jquery

crud