用jQuery从PHP获取MySQL数据并显示为列表的方法

技术文摘

2025-01-09 02:15:11 小编

在动态网页开发中，经常需要从数据库获取数据并展示给用户。本文将详细介绍如何使用jQuery从PHP获取MySQL数据，并将其显示为列表。

我们要确保服务器环境配置正确，安装并配置好Apache、PHP和MySQL。

在MySQL中创建一个数据库和表，并插入一些测试数据。例如，创建一个名为“users”的表，包含“id”、“name”和“email”字段：

CREATE DATABASE mydb;
USE mydb;
CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255),
    email VARCHAR(255)
);
INSERT INTO users (name, email) VALUES ('John Doe', 'john@example.com');

接下来，编写PHP代码从MySQL数据库中获取数据。创建一个名为“get_data.php”的文件：

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mydb";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

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

$sql = "SELECT id, name, email FROM users";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    $data = [];
    while ($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
    echo json_encode($data);
} else {
    echo "没有数据";
}

$conn->close();
?>

然后，在HTML页面中使用jQuery来获取并显示数据。创建一个HTML文件，引入jQuery库：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>从PHP获取MySQL数据并显示为列表</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>用户列表</h1>
    <ul id="userList"></ul>

    <script>
        $(document).ready(function() {
            $.ajax({
                url: 'get_data.php',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    var list = $('#userList');
                    list.empty();
                    $.each(data, function(index, user) {
                        list.append('<li>ID: '+ user.id + ', 姓名: '+ user.name + ', 邮箱: '+ user.email + '</li>');
                    });
                },
                error: function() {
                    console.log('获取数据失败');
                }
            });
        });
    </script>
</body>
</html>

通过以上步骤，我们实现了用jQuery从PHP获取MySQL数据并显示为列表。这种方法在Web开发中非常实用，可以高效地实现数据的动态展示。无论是小型项目还是大型应用，都可以灵活运用此技术来满足数据展示的需求。

TAGS: PHP jQuery MySQL 数据列表

万千站长工具

技术文摘

用jQuery从PHP获取MySQL数据并显示为列表的方法

欢迎使用万千站长工具！