当前位置：首页 > 问答 > 正文

AJAX配合PHP操作MySQL数据库的简单示范和步骤分享

芮以莲
问答
2025-12-26 13:37:43
2

AJAX配合PHP操作MySQL数据库的简单示范和步骤分享

想象一下，你在浏览一个网页，比如一个待办事项列表，你添加一个新的任务，页面没有整体刷新，但新任务就悄悄地出现在了列表里，这种流畅体验的背后，很可能就是AJAX、PHP和MySQL在协同工作，下面,我将一步步地向你展示如何实现这个过程的简化版本。

第一步：打好基础 - 创建数据库和表

我们需要一个存储数据的地方，我们使用MySQL，假设你已经有了一个可用的MySQL数据库，我们在里面创建一张简单的表来存储信息，我们创建一个名为 items 的表,用来存放任务列表。

使用类似phpMyAdmin的工具或者MySQL命令行,执行下面的SQL语句来创建表：

CREATE TABLE items (
    id INT(11) AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

这条命令创建了一个有三列的表格：id（自动增长的唯一标识）、name（任务名称）、created_at（创建时间）。

第二步：建立连接桥梁 - 编写PHP处理脚本

PHP的角色是作为服务器端的“中间人”，它负责接收AJAX的请求，然后与MySQL数据库对话（执行增删改查）,最后把结果返回给前端。

我们创建一个名为 api.php 的文件，这个文件将根据不同的请求，执行不同的数据库操作，为了简单起见，我们用 $_POST['action'] 来判断要执行什么操作。

AJAX配合PHP操作MySQL数据库的简单示范和步骤分享

以下是 api.php 文件的基本框架：

<?php
// 数据库连接配置，根据你的实际情况修改
$servername = "localhost";
$username = "你的数据库用户名";
$password = "你的数据库密码";
$dbname = "你的数据库名";
// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
// 设置字符集，防止中文乱码
$conn->set_charset("utf8");
// 获取前端传来的动作参数
$action = isset($_POST['action']) ? $_POST['action'] : '';
// 根据不同的动作执行不同的操作
switch ($action) {
    case 'add':
        // 处理添加数据的请求
        break;
    case 'get':
        // 处理获取数据的请求
        break;
    case 'delete':
        // 处理删除数据的请求
        break;
    default:
        echo json_encode(['success' => false, 'message' => '未知操作']);
        break;
}
// 关闭数据库连接
$conn->close();
?>

我们来填充 add 和 get 这两个操作。

处理添加（Add）操作：

在 case 'add': 的下面添加代码：

    case 'add':
        if (isset($_POST['item_name'])) {
            $name = $conn->real_escape_string($_POST['item_name']); // 防止SQL注入
            $sql = "INSERT INTO items (name) VALUES ('$name')";
            if ($conn->query($sql) === TRUE) {
                echo json_encode(['success' => true, 'message' => '项目添加成功！']);
            } else {
                echo json_encode(['success' => false, 'message' => '添加失败：' . $conn->error]);
            }
        } else {
            echo json_encode(['success' => false, 'message' => '未接收到数据']);
        }
        break;

这段代码做了几件事：接收前端发来的 item_name，将其安全地插入到数据库中,然后返回一个JSON格式的成功或失败信息。

AJAX配合PHP操作MySQL数据库的简单示范和步骤分享

处理获取（Get）操作：

在 case 'get': 的下面添加代码：

    case 'get':
        $sql = "SELECT id, name FROM items ORDER BY created_at DESC";
        $result = $conn->query($sql);
        $items = array();
        if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
                $items[] = $row; // 将每一行数据添加到数组中
            }
        }
        echo json_encode($items); // 将整个数组转换为JSON输出
        break;

这段代码查询 items 表中的所有数据，按时间倒序排列，然后将结果转换为JSON数组输出，JSON是一种轻量级的数据交换格式,JavaScript可以很方便地处理它。

第三步：让页面动起来 - 编写前端HTML和AJAX

我们创建一个 index.html 页面,这是用户直接看到和交互的界面。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">简单的AJAX示例</title>
</head>
<body>
    <h1>我的任务列表</h1>
    <form id="itemForm">
        <input type="text" id="itemName" placeholder="输入新任务..." required>
        <button type="submit">添加</button>
    </form>
    <ul id="itemList"></ul>
    <script>
        // 页面加载完成后，自动获取并显示任务列表
        document.addEventListener('DOMContentLoaded', function() {
            loadItems();
        });
        // 为表单添加提交事件监听
        document.getElementById('itemForm').addEventListener('submit', function(e) {
            e.preventDefault(); // 阻止表单默认提交（页面刷新）
            var itemNameInput = document.getElementById('itemName');
            var itemName = itemNameInput.value.trim();
            if (itemName) {
                addItem(itemName);
                itemNameInput.value = ''; // 清空输入框
            }
        });
        // 使用AJAX向服务器添加新项目
        function addItem(name) {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'api.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    if (response.success) {
                        loadItems(); // 添加成功后，重新加载列表
                    } else {
                        alert('错误：' + response.message);
                    }
                }
            };
            // 发送数据，指定action为‘add’，并带上项目名称
            xhr.send('action=add&item_name=' + encodeURIComponent(name));
        }
        // 使用AJAX从服务器获取项目列表
        function loadItems() {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'api.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var items = JSON.parse(xhr.responseText);
                    displayItems(items);
                }
            };
            // 发送请求，指定action为‘get’
            xhr.send('action=get');
        }
        // 将获取到的项目列表显示在页面上
        function displayItems(items) {
            var itemList = document.getElementById('itemList');
            itemList.innerHTML = ''; // 清空当前列表
            items.forEach(function(item) {
                var li = document.createElement('li');
                li.textContent = item.name;
                itemList.appendChild(li);
            });
        }
    </script>
</body>
</html>

总结一下整个过程：

用户交互：用户在 index.html 页面的输入框中输入任务名并点击“添加”。
AJAX发送请求：JavaScript中的 addItem 函数被触发，它使用AJAX（通过 XMLHttpRequest 对象）向 api.php 发送一个POST请求，请求中包含了动作类型（action=add）和要添加的数据（item_name=用户输入的内容）。
PHP处理请求：服务器上的 api.php 文件接收到请求，它根据 $_POST['action'] 的值判断出是“添加”操作，于是执行INSERT语句，将新任务插入到MySQL数据库的 items 表中。
PHP返回响应：插入操作成功后，PHP脚本生成一个JSON格式的成功消息（如 {“success": true, "message": ...}）并将其输出。
AJAX接收响应：前端的 xhr 对象接收到PHP返回的JSON数据。
更新页面：JavaScript解析JSON数据，如果添加成功，就调用 loadItems() 函数，这个函数会再次发起一个AJAX请求（action=get）到 api.php，获取最新的全部任务列表，然后调用 displayItems 函数，用新的数据动态更新网页上的列表,而整个页面无需刷新。