以下是一个基本的示例，演示如何使用 AJAX 与服务器端（使用 PHP 和 MySQL 数据库）进行交互。在这个示例中，我们将通过 AJAX 获取并显示用户的信息。
1. 数据库准备：
首先，确保你有一个可用的 MySQL 数据库，并创建一个名为 users 的表，用于存储用户信息。以下是一个简单的创建表的 SQL 语句：
CREATE TABLE users (
id INT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(255),
email VARCHAR(255)
);
插入一些示例数据：
INSERT INTO users (username, email) VALUES
('JohnDoe', 'john@example.com'),
('JaneSmith', 'jane@example.com');
2. 服务器端处理（使用 PHP）：
创建一个名为 getUsers.php 的 PHP 文件，用于从数据库中检索用户信息。
<?php
// 数据库连接配置
$host = 'your_host';
$dbname = 'your_database';
$username = 'your_username';
$password = 'your_password';
// 创建数据库连接
try {
$db = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
die('Database connection failed: ' . $e->getMessage());
}
// 查询用户信息
$query = $db->query('SELECT * FROM users');
$users = $query->fetchAll(PDO::FETCH_ASSOC);
// 将用户信息转换为 JSON 格式
echo json_encode($users);
?>
3. 前端使用 AJAX：
创建一个 HTML 文件，通过 AJAX 请求 getUsers.php 并显示返回的用户信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Database Example</title>
</head>
<body>
<h1>User Information</h1>
<ul id="userList"></ul>
<script>
// 使用 AJAX 请求用户信息
var xhr = new XMLHttpRequest();
xhr.open('GET', 'getUsers.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 请求成功，处理返回的用户信息
var users = JSON.parse(xhr.responseText);
displayUsers(users);
}
};
xhr.send();
// 显示用户信息
function displayUsers(users) {
var userList = document.getElementById('userList');
users.forEach(function(user) {
var listItem = document.createElement('li');
listItem.textContent = 'Username: ' + user.username + ', Email: ' + user.email;
userList.appendChild(listItem);
});
}
</script>
</body>
</html>
在这个示例中，AJAX 请求将由前端的 JavaScript 发送到服务器端的 PHP 文件。PHP 文件连接到数据库，检索用户信息，并将其以 JSON 格式返回给前端。前端 JavaScript 解析 JSON 数据，并将用户信息显示在页面上。
确保替换 PHP 文件中的数据库连接配置（$host、$dbname、$username、$password）为你的实际值。这是一个简单的示例，实际中可能需要更多的安全性和错误处理。
转载请注明出处：http://www.zyzy.cn/article/detail/13184/AJAX