如何使用 jQuery 和 PHP 动态显示 MySQL 数据(1)

📌 相关文章

📜 如何使用 jQuery 和 PHP 动态显示 MySQL 数据(1)

📅 最后修改于: 2023-12-03 15:23:55.289000 🧑 作者: Mango

如何使用 jQuery 和 PHP 动态显示 MySQL 数据

在 Web 应用程序中，显示数据库中的数据对于开发人员来说是一个常见的任务。在本教程中，我们将介绍如何使用 jQuery 和 PHP 动态显示 MySQL 数据。

准备工作

在开始之前，确保你已经安装了以下内容：

Web 服务器（比如 Apache）
PHP
MySQL 数据库

在本教程中，我们将使用 XAMPP，这是一个跨平台的 Web 服务器解决方案。你可以从官方网站上下载并安装它。

创建数据库

首先，我们需要创建一个数据库，用来存储我们的数据。在 MySQL 中，可以使用以下 SQL 语句创建一个数据库：

CREATE DATABASE mydatabase;

在这个例子中，我们将使用 “mydatabase” 作为数据库名称。

创建表

接下来，我们需要创建一个表来存储我们的数据。在这个例子中，我们将创建一个名为 “employees” 的表。表将包括以下列：

id：整数类型，作为每个记录的唯一标识符
name：字符串类型，员工的名称
email：字符串类型，员工的电子邮件地址
phone：字符串类型，员工的电话号码

使用以下 SQL 语句创建表：

CREATE TABLE employees (
    id INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    email VARCHAR(255) NOT NULL,
    phone VARCHAR(20) NOT NULL
);

添加数据

我们需要将一些数据添加到表中，以便我们有一些数据可供显示。在本教程中，我们将手动添加一些数据。使用以下 SQL 语句将数据添加到表中：

INSERT INTO employees (name, email, phone)
VALUES
    ('John Smith', 'john@example.com', '555-1234'),
    ('Jane Doe', 'jane@example.com', '555-5678'),
    ('Bob Johnson', 'bob@example.com', '555-9012');

创建 PHP 文件

现在，我们需要一个 PHP 文件来连接到数据库，并从中检索数据。创建一个名为 “employees.php” 的文件，并将以下代码添加到其中：

<?php
$host = "localhost"; // 数据库主机名
$username = "root"; // 数据库用户名
$password = ""; // 数据库密码
$database = "mydatabase"; // 数据库名称

// 创建一个 MySQL 连接
$conn = new mysqli($host, $username, $password, $database);

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

// 查询数据
$sql = "SELECT * FROM employees";
$result = $conn->query($sql);

// 将查询结果转换为 JSON 格式
$rows = array();
while ($row = $result->fetch_assoc()) {
    $rows[] = $row;
}
header('Content-Type: application/json');
echo json_encode($rows);

// 关闭连接
$conn->close();
?>

在该文件中，我们创建一个 MySQL 连接，并从 “employees” 表中检索所有数据。然后，我们将查询结果转换为 JSON 格式，并将其作为响应发送回客户端。

创建 HTML 文件

现在，我们需要一个 HTML 文件来显示数据。在创建 HTML 文件之前，我们需要添加以下文件到项目根目录中：

jQuery 库：可以在 jQuery 官方网站上下载。
Bootstrap 库：可以在 Bootstrap 官方网站上下载。

创建一个名为 “index.html” 的文件，并将以下代码添加到其中：

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic MySQL Data</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .page-header {
            margin-top: 0;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>Dynamic MySQL Data</h1>
    </div>
    <table class="table table-hover">
        <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
        </tr>
        </thead>
        <tbody id="employees">
        </tbody>
    </table>
</div>
<script>
    $(document).ready(function () {
        $.getJSON("employees.php", function (data) {
            $.each(data, function (key, value) {
                $('#employees').append("<tr>" +
                    "<td>" + value.id + "</td>" +
                    "<td>" + value.name + "</td>" +
                    "<td>" + value.email + "</td>" +
                    "<td>" + value.phone + "</td>" +
                    "</tr>");
            });
        });
    });
</script>
</body>
</html>

在该文件中，我们引入了 jQuery 和 Bootstrap 库，以便我们使用它们来创建 HTML 表格。然后，我们创建一个表格来显示 MySQL 数据，并使用 jQuery 在页面加载时从服务器检索数据。

运行应用

现在，可以启动 Web 服务器，并在 Web 浏览器中打开 “index.html” 文件。你应该看到一个美观的表格，其中包含从 MySQL 数据库中检索的数据。

结论

在本教程中，我们介绍了如何使用 jQuery 和 PHP 从 MySQL 数据库中动态显示数据。这是一个非常基本的示例，你可以通过使用自己的数据来自定义它。有了这些知识，你可以构建更高级的 Web 应用程序，用于管理和操作数据库中的数据。