正文

学会不用刷新页面，用jQuery轻松删除数据库记录

/0 浏览量
0626

在Web开发中，我们经常需要与数据库进行交互，例如添加、删除或更新记录。传统的做法是通过发送请求到服务器，然后刷新页面来显示更新后的数据。然而，这种方法用户体验较差，因为用户需要等待页面刷新才能看到结果。使用jQuery，我们可以实现无需刷新页面的异步删除操作，从而提升用户体验。

1. 准备工作

在开始之前，请确保您已经：

  • 熟悉jQuery的基本用法。
  • 了解如何使用AJAX与服务器进行异步通信。
  • 拥有一个可以操作的数据库和相应的表。

2. HTML结构

首先，我们需要一个HTML结构来展示数据库记录。以下是一个简单的示例：

<table id="records">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 数据库记录将在这里动态加载 -->
  </tbody>
</table>

3. CSS样式

为了使表格更美观，我们可以添加一些CSS样式：

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

4. jQuery脚本

接下来，我们将使用jQuery来实现异步删除操作。以下是完整的脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    // 加载数据库记录
    function loadRecords() {
      $.ajax({
        url: 'load_records.php', // 服务器端脚本，用于从数据库加载记录
        type: 'GET',
        success: function(data) {
          $('#records tbody').html(data);
        }
      });
    }

    loadRecords(); // 初始加载

    // 删除记录
    $('#records').on('click', '.delete-btn', function() {
      var recordId = $(this).data('id');
      $.ajax({
        url: 'delete_record.php', // 服务器端脚本，用于删除记录
        type: 'POST',
        data: { id: recordId },
        success: function(data) {
          loadRecords(); // 刷新记录
        }
      });
    });
  });
</script>

5. 服务器端脚本

在上述脚本中，我们使用了两个服务器端脚本：load_records.php 和 delete_record.php。以下是这两个脚本的基本示例：

load_records.php

<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

// 查询数据库
$sql = "SELECT id, name FROM records";
$result = $conn->query($sql);

// 创建HTML表格
echo "<table>";
echo "<thead>";
echo "<tr>";
echo "<th>ID</th>";
echo "<th>Name</th>";
echo "<th>操作</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
if ($result->num_rows > 0) {
  while($row = $result->fetch_assoc()) {
    echo "<tr>";
    echo "<td>" . $row["id"]. "</td>";
    echo "<td>" . $row["name"]. "</td>";
    echo "<td><button class='delete-btn' data-id='" . $row["id"]. "'>删除</button></td>";
    echo "</tr>";
  }
} else {
  echo "<tr><td colspan='3'>没有记录</td></tr>";
}
echo "</tbody>";
echo "</table>";

$conn->close();
?>

delete_record.php

<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

// 删除记录
$id = $_POST['id'];
$sql = "DELETE FROM records WHERE id=$id";

if ($conn->query($sql) === TRUE) {
  echo "记录删除成功";
} else {
  echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

6. 总结

通过以上步骤，我们成功地实现了使用jQuery和AJAX实现无需刷新页面的数据库记录删除功能。这种方法可以显著提升用户体验，使Web应用更加流畅和高效。在实际应用中，您可以根据自己的需求对代码进行修改和扩展。

-- 展开阅读全文 --