本文将演示如何使用 PHP 从数据库中检索数据，并将其通过 AJAX 请求以 JSON 格式传递给 JavaScript，最终在 HTML 页面上展示。重点解决 JSON 解析错误，并提供清晰的代码示例和步骤说明。
PHP 后端代码
首先，我们需要一个 PHP 函数来从数据库中检索数据，并将其编码为 JSON 格式。以下是一个示例：
<?php
function retrieve_post($connection) {
$sql = "SELECT * FROM tbl_user_posts";
$result = mysqli_query($connection, $sql);
// 确保查询成功执行
if (!$result) {
die("查询失败: " . mysqli_error($connection));
}
// 将结果集转换为关联数组
$data = mysqli_fetch_all($result, MYSQLI_ASSOC);
// 将数据编码为 JSON 格式
header('Content-Type: application/json'); // 设置响应头，告诉浏览器返回的是 JSON 数据
echo json_encode($data);
}
// 示例用法（假设你已经建立了数据库连接 $connection）
// retrieve_post($connection);
?>关键点：
- mysqli_fetch_all($result, MYSQLI_ASSOC): 此函数将 MySQL 查询结果集转换为一个关联数组，方便后续 JSON 编码。
- header('Content-Type: application/json'): 设置 HTTP 响应头，告诉客户端（浏览器）返回的是 JSON 数据。这非常重要，否则 JavaScript 可能无法正确解析。
- 错误处理: 添加了错误检查，确保查询成功执行，避免出现未知的错误。
JavaScript 前端代码
接下来，我们需要使用 JavaScript 通过 AJAX 请求从 PHP 脚本获取数据，并将其解析为 JavaScript 对象，最后将其展示在 HTML 页面上。
立即学习“PHP免费学习笔记（深入）”；
function displayPosts(){
$.ajax({
type: "POST",
url: "main_page.php", // 确保 URL 正确
dataType: "json", // 显式指定返回的数据类型为 JSON
success: function(response) {
// response 已经是 JavaScript 对象，无需再次解析
console.log(response);
// 遍历数据并展示
for (var i = 0; i < response.length; i++) {
var row = response[i];
var name = row.name;
var user_post = row.user_post;
console.log(name, user_post);
// 在 HTML 中展示数据 (示例)
$("#posted").append("<p>" + name + ": " + user_post + "</p>");
}
},
error: function(xhr, status, error) {
console.error("AJAX 请求失败: " + status + " - " + error);
console.log(xhr.responseText); // 输出完整的响应内容，方便调试
}
});
}
$(document).ready(function() {
displayPosts();
});关键点：
- dataType: "json": 在 AJAX 请求中显式指定 dataType 为 "json"。 jQuery 会自动解析 JSON 响应，并将结果作为 JavaScript 对象传递给 success 回调函数。因此，无需再使用 JSON.parse(response)。
- 错误处理: 添加了 error 回调函数，用于处理 AJAX 请求失败的情况。 这有助于调试，可以查看具体的错误信息和响应内容。
- 数据展示: 示例代码展示了如何将从 PHP 获取的数据动态地添加到 HTML 页面中。 你需要根据你的实际需求修改这部分代码。
- URL: 确保 url 指向正确的 PHP 文件。 建议使用小写文件名。
HTML 代码
HTML 代码部分保持不变，用于展示数据：
<div class="user-post">
Create post:<br>
<form id="form" method="POST">
<textarea id = "create_post" name="create_post" rows="10" cols = "50"></textarea>
<input type="submit" class="post-button" value="PostButton" onclick = submit_post()>
</form>
</div>
<div class="posts" id="posted">
<div class="post">
<h3 id="existing_posts"><img src="default-pic.png" class="profile-pic" alt="Default Picture" width="50" height="50">Posts</h3>
<p>This is an example of a post. It will need to be boxed and made so that the name of the user goes above
the name of the likes and dislikes of the posts are to the left of the post and that the reply and report
functionalities are at the bottom right of the posts. It will also need a box around it to show where the post starts and ends.</p>
<div class="options">
<a href="">Like</a>
<a href="">Comment</a>
<a href="" class="report">Report</a>
</div>
</div>
</div>总结与注意事项
- JSON 格式: 确保 PHP 返回的 JSON 数据格式正确。可以使用在线 JSON 验证工具检查。
- 错误处理: 在 PHP 和 JavaScript 中添加错误处理代码，以便更好地调试问题。
- 数据类型: 明确指定 AJAX 请求的 dataType 为 "json"。
- URL: 确保 AJAX 请求的 URL 指向正确的 PHP 文件。
- 跨域问题: 如果 PHP 和 HTML 页面位于不同的域名下，可能会遇到跨域问题。 你需要配置 CORS 才能解决。
通过以上步骤，你应该能够成功地使用 PHP 从数据库中检索数据，并将其通过 AJAX 请求以 JSON 格式传递给 JavaScript，最终在 HTML 页面上展示。 记住，仔细检查错误信息，并使用调试工具来帮助你找到问题所在。
