如何使用 ajax 从 db 获取数据 - Javascript

使用 Ajax 从数据库获取数据是一种常见的 Web 开发技巧，可以在不刷新页面的情况下异步地从服务器获取数据，实现动态更新网页内容的效果。本文将介绍如何使用 Ajax 技术通过 JavaScript 从数据库获取数据。

准备工作

首先，我们需要一个后端 API，用于从数据库中检索所需数据并返回 JSON 格式的数据。为了简化示例，我们使用 PHP 作为后端语言，MySQL 作为数据库引擎。在后端创建一个 API，例如：

<?php

header('Content-Type: application/json');

// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "databasename";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// 从数据库中检索数据
$sql = "SELECT * FROM users";
$result = $conn->query($sql);

// 将数据转换成 JSON 格式并返回
$data = array();
while($row = $result->fetch_assoc()) {
    $data[] = $row;
}

echo json_encode($data);

$conn->close();
?>

上述代码连接到数据库，检索所有用户数据并将其转换为 JSON 格式，然后返回客户端。将此文件保存为 api.php。

发送 Ajax 请求

现在我们可以使用 JavaScript 发送 Ajax 请求来获取数据。我们可以使用 XMLHttpRequest 对象或 jQuery 函数 $ajax，这里我们将使用后者。

在 HTML 页面中添加一个按钮和一个用于显示数据的容器：

<button id="get-data">获取数据</button>

<div id="data-container"></div>

然后在 JavaScript 中编写发送 Ajax 请求的代码：

$(document).ready(function() {
    $("#get-data").click(function() {
        $.ajax({
            url: "api.php",
            dataType: "json",
            success: function(data) {
                var html = "";
                $.each(data, function(index, value) {
                    html += "<p>" + value.username + " - " + value.email + "</p>";
                });
                $("#data-container").html(html);
            }
        });
    });
});

解析上述代码：

• $(document).ready() 方法用于在文档加载完成后执行代码。
• $("#get-data").click() 方法为按钮添加点击事件处理程序。
• $.ajax() 方法发送 Ajax 请求，url 参数指定请求的 API，dataType 参数声明返回的数据类型为 JSON。
• success 回调函数在请求成功时执行，data 参数包含从服务器返回的数据。
• 在 success 回调函数中，我们遍历数据数组并构建一个包含用户名和电子邮件的 HTML 字符串，最后将其添加到数据容器中。

至此，我们已经可以通过 Ajax 技术从数据库中获取数据并在网页上显示。这里的示例仅供参考，实际中可能需要根据具体情况进行修改和扩展。