当前位置：首页 > 行业动态 > 正文

ajax 表格 mysql数据库数据

admin
行业动态
2025-03-17
2

问题：，如何使用 AJAX 从 MySQL 数据库获取数据并在表格中显示？回答：，使用 AJAX 通过 PHP 脚本从 MySQL 数据库获取数据，然后动态生成 HTML 表格并插入到网页中。

使用 AJAX 从 MySQL 数据库加载数据到表格

在现代网页开发中，动态加载和显示数据是常见的需求，本文将详细介绍如何使用 AJAX 技术从 MySQL 数据库中获取数据，并将其显示在一个 HTML 表格中。

1. 环境准备

1 安装和配置服务器

确保你的服务器上已经安装了以下软件：

Web 服务器（如 Apache 或 Nginx）

PHP

MySQL

ajax 表格 mysql数据库数据

2 创建数据库和表

创建一个 MySQL 数据库和一个包含示例数据的表。

CREATE DATABASE example_db;
USE example_db;
CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(50),
    email VARCHAR(100)
);
INSERT INTO users (name, email) VALUES ('John Doe', 'john@example.com');
INSERT INTO users (name, email) VALUES ('Jane Smith', 'jane@example.com');

2. 前端部分：HTML 和 JavaScript

1 创建 HTML 文件

创建一个index.html 文件，用于显示数据表格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX Table Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>User Data</h1>
    <table border="1" id="dataTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <!-Data will be populated here -->
        </tbody>
    </table>
    <script src="script.js"></script>
</body>
</html>

2 创建 JavaScript 文件

创建一个script.js 文件，用于处理 AJAX 请求和更新表格内容。

$(document).ready(function() {
    $.ajax({
        url: 'fetch_data.php', // URL of the server-side script
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            var tableBody = $('#dataTable tbody');
            tableBody.empty(); // Clear existing rows
            data.forEach(function(user) {
                var row = '<tr>' +
                            '<td>' + user.id + '</td>' +
                            '<td>' + user.name + '</td>' +
                            '<td>' + user.email + '</td>' +
                          '</tr>';
                tableBody.append(row);
            });
        },
        error: function(xhr, status, error) {
            console.error('Error fetching data: ' + error);
        }
    });
});

3. 后端部分：PHP 脚本

ajax 表格 mysql数据库数据

1 创建 PHP 文件

创建一个fetch_data.php 文件，用于从 MySQL 数据库中获取数据并返回 JSON 格式的响应。

<?php
header('Content-Type: application/json');
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "example_db";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, name, email FROM users";
$result = $conn->query($sql);
$data = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}
$conn->close();
echo json_encode($data);
?>

4. 运行项目

将所有文件放在你的 Web 服务器根目录下，然后通过浏览器访问index.html 文件，你应该能够看到一个包含用户数据的表格。

5. 相关问题与解答