1. 服务器端处理（使用 PHP）：
创建一个 PHP 文件（例如 getTodos.php），该文件将生成一个简单的 JSON 响应。
<?php
// 创建一个简单的 JSON 响应
header('Content-Type: application/json');
$todos = [
['id' => 1, 'title' => 'Buy groceries', 'completed' => false],
['id' => 2, 'title' => 'Read a book', 'completed' => true],
['id' => 3, 'title' => 'Write code', 'completed' => false]
];
echo json_encode($todos);
?>
2. 前端使用 AJAX：
创建一个 HTML 文件，通过 AJAX 请求 getTodos.php 并处理返回的 JSON 数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX JSON Example</title>
</head>
<body>
<h1>To-Do List</h1>
<ul id="todoList"></ul>
<script>
// 使用 AJAX 请求 JSON 数据
var xhr = new XMLHttpRequest();
xhr.open('GET', 'getTodos.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 请求成功，处理返回的 JSON 数据
var todos = JSON.parse(xhr.responseText);
displayTodos(todos);
}
};
xhr.send();
// 显示待办事项列表
function displayTodos(todos) {
var todoList = document.getElementById('todoList');
todos.forEach(function(todo) {
var listItem = document.createElement('li');
listItem.textContent = 'ID: ' + todo.id + ', Title: ' + todo.title + ', Completed: ' + todo.completed;
todoList.appendChild(listItem);
});
}
</script>
</body>
</html>
在这个示例中，AJAX 请求将由前端的 JavaScript 发送到服务器端的 PHP 文件。PHP 文件生成一个包含待办事项列表的简单 JSON 响应。前端 JavaScript 使用 JSON.parse 解析 JSON 字符串，并通过 DOM 操作获取和显示待办事项列表。
这只是一个简单的示例，实际中可能需要更多的安全性和错误处理。确保服务器返回的 JSON 数据格式正确，以便在前端正确解析。
转载请注明出处：http://www.zyzy.cn/article/detail/13186/AJAX