AJAX 与数据库交互实例

通过 AJAX 和 服务器端技术（如 PHP 或 ASP），你可以与数据库进行交互，执行如 插入数据、查询数据、更新数据、删除数据 等操作。下面我将分别展示 PHP 和 MySQL 数据库的常见应用实例。

1. 使用 AJAX 和 PHP 与 MySQL 数据库交互

步骤概览

  1. 前端 (AJAX)：使用 AJAX 发送请求到服务器。
  2. 后端 (PHP)：接收请求，操作数据库，并返回响应。
  3. 数据库 (MySQL)：执行数据库操作（如查询、插入、更新等）。

2. 示例：AJAX 查询数据库 (查询操作)

前端 (JavaScript + AJAX)

// 使用 AJAX 向 PHP 页面发送 GET 请求查询数据
var xhr = new XMLHttpRequest();
xhr.open("GET", "fetchData.php", true);

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);  // 获取返回的 JSON 数据
        console.log("从数据库返回的数据:", response);

        // 在页面上展示返回的数据
        var output = "<ul>";
        for (var i = 0; i < response.length; i++) {
            output += "<li>" + response[i].name + " - " + response[i].email + "</li>";
        }
        output += "</ul>";

        document.getElementById("output").innerHTML = output;
    }
};

xhr.send();

后端 (PHP – fetchData.php)

<?php
// 配置数据库连接
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test_db";

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

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

// SQL 查询语句
$sql = "SELECT name, email FROM users";
$result = $conn->query($sql);

// 初始化返回数据数组
$data = array();

// 处理查询结果
if ($result->num_rows > 0) {
    // 将查询结果存入数组
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

// 将数据转为 JSON 格式并返回
echo json_encode($data);

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

说明：

  1. 前端 (AJAX)：
    • 使用 XMLHttpRequest 向 fetchData.php 页面发送 GET 请求。
    • 获取到返回的 JSON 数据并显示在页面上。
  2. 后端 (PHP)：
    • 连接到 MySQL 数据库并执行 SELECT 查询，从 users 表获取 name 和 email 字段的数据。
    • 将查询结果存入数组并通过 json_encode() 转换为 JSON 格式返回。

3. 示例：AJAX 插入数据到数据库 (INSERT 操作)

前端 (JavaScript + AJAX)

// 发送一个 POST 请求向 PHP 页面插入数据
var xhr = new XMLHttpRequest();
xhr.open("POST", "insertData.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);  // 服务器返回的响应
    }
};

// 数据参数
var data = "name=JohnDoe&email=johndoe@example.com";

// 发送数据
xhr.send(data);

后端 (PHP – insertData.php)

<?php
// 配置数据库连接
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test_db";

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

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

// 获取 POST 请求的参数
$name = $_POST['name'];
$email = $_POST['email'];

// SQL 插入语句
$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";

// 执行 SQL 查询
if ($conn->query($sql) === TRUE) {
    echo "新记录插入成功";
} else {
    echo "插入失败: " . $conn->error;
}

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

说明：

  1. 前端 (AJAX)：
    • 使用 XMLHttpRequest 向 insertData.php 发送 POST 请求，并传递用户输入的 name 和 email 参数。
  2. 后端 (PHP)：
    • 获取 POST 请求的 name 和 email 数据。
    • 执行 INSERT INTO SQL 语句将数据插入到 users 表中。
    • 返回插入结果。

4. 示例：AJAX 更新数据到数据库 (UPDATE 操作)

前端 (JavaScript + AJAX)

// 发送一个 POST 请求向 PHP 页面更新数据
var xhr = new XMLHttpRequest();
xhr.open("POST", "updateData.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);  // 服务器返回的响应
    }
};

// 数据参数
var data = "id=1&name=JaneDoe&email=janedoe@example.com";

// 发送数据
xhr.send(data);

后端 (PHP – updateData.php)

<?php
// 配置数据库连接
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test_db";

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

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

// 获取 POST 请求的参数
$id = $_POST['id'];
$name = $_POST['name'];
$email = $_POST['email'];

// SQL 更新语句
$sql = "UPDATE users SET name='$name', email='$email' WHERE id=$id";

// 执行 SQL 查询
if ($conn->query($sql) === TRUE) {
    echo "记录更新成功";
} else {
    echo "更新失败: " . $conn->error;
}

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

说明：

  1. 前端 (AJAX)：
    • 使用 XMLHttpRequest 向 updateData.php 发送 POST 请求，传递 id、name 和 email 作为更新的数据。
  2. 后端 (PHP)：
    • 获取 POST 请求的 id、name 和 email 参数。
    • 执行 UPDATE SQL 语句更新对应的记录。
    • 返回更新结果。

5. 示例：AJAX 删除数据 (DELETE 操作)

前端 (JavaScript + AJAX)

// 发送一个 POST 请求向 PHP 页面删除数据
var xhr = new XMLHttpRequest();
xhr.open("POST", "deleteData.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);  // 服务器返回的响应
    }
};

// 数据参数
var data = "id=1";  // 删除 id 为 1 的记录

// 发送数据
xhr.send(data);

后端 (PHP – deleteData.php)

<?php
// 配置数据库连接
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test_db";

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

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

// 获取 POST 请求的 id 参数
$id = $_POST['id'];

// SQL 删除语句
$sql = "DELETE FROM users WHERE id=$id";

// 执行 SQL 查询
if ($conn->query($sql) === TRUE) {
    echo "记录删除成功";
} else {
    echo "删除失败: " . $conn->error;
}

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

说明：

  1. 前端 (AJAX)：
    • 使用 XMLHttpRequest 向 deleteData.php 发送 POST 请求，传递要删除的 id 参数。
  2. 后端 (PHP)：
    • 获取 POST 请求的 id 参数。
    • 执行 DELETE SQL 语句删除指定 id 的记录。
    • 返回删除结果。

总结

  • 使用 AJAX 与 PHP 和 MySQL 数据库交互，可以实现实时的数据库操作（如查询、插入、更新、删除）并动态更新页面。
  • 前端通过 AJAX 发送 HTTP 请求，后端用 PHP 处理请求并与 MySQL 数据库交互。
  • 后端通过 JSON 或 文本 格式返回响应，前端再根据返回数据更新页面内容。

这种无刷新方式使得用户体验更加流畅，常用于表单提交、数据查询、内容更新等功能。