本文档旨在指导开发者如何使用 PHP 从数据库中检索数据，并通过 AJAX 和 JSON 格式将其传递到 JavaScript 中，以便在网页上动态显示。我们将重点解决常见的 “Unexpected end of JSON input” 错误，并提供清晰的代码示例和步骤说明。
PHP 端：数据检索与 JSON 编码
首先，我们需要在 PHP 中从数据库中检索数据，并将其编码为 JSON 格式。关键在于正确使用 mysqli_fetch_all() 函数，并将结果集转换为关联数组，然后再进行 JSON 编码。
0) { // 将结果集转换为关联数组 $data = mysqli_fetch_all($result, MYSQLI_ASSOC); // 将关联数组编码为 JSON 格式 echo json_encode($data); } else { // 如果结果集为空，返回一个空数组的 JSON echo json_encode([]); }}?>
代码解释：
mysqli_query($connection, $sql): 执行 SQL 查询。mysqli_num_rows($result): 检查结果集中是否有数据。这是避免 “Unexpected end of JSON input” 错误的关键步骤，因为如果结果集为空，直接 json_encode 可能会导致问题。mysqli_fetch_all($result, MYSQLI_ASSOC): 将结果集一次性提取为关联数组。MYSQLI_ASSOC 确保数据以键值对的形式存储，方便 JavaScript 处理。json_encode($data): 将 PHP 数组编码为 JSON 字符串。
重要提示：
立即学习“PHP免费学习笔记（深入）”；
确保数据库连接 $connection 是有效的。始终检查 SQL 查询是否成功，并处理错误。如果查询结果为空，返回一个空数组的 JSON (echo json_encode([]))，而不是 null 或其他值。
JavaScript 端：AJAX 请求与 JSON 解析
接下来，我们需要使用 JavaScript 发送 AJAX 请求到 PHP 脚本，并解析返回的 JSON 数据。
function displayPosts() { $.ajax({ type: "POST", url: "main_page.php", // 确保 URL 正确 dataType: "json", // 明确指定期望的数据类型为 JSON success: function(response) { // response 已经是 JSON 对象，无需再次解析 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("" + name + ": " + user_post + "
杰易OA办公自动化系统6.0 基于Intranet/Internet 的Web下的办公自动化系统，采用了当今最先进的PHP技术，是综合大量用户的需求,经过充分的用户论证的基础上开发出来的，独特的即时信息、短信、电子邮件系统、完善的工作流、数据库安全备份等功能使得信息在企业内部传递效率极大提高，信息传递过程中耗费降到最低。办公人员得以从繁杂的日常办公事务处理中解放出来，参与更多的富于思考性和创造性的工作。系统力求突出体系结构简明
0 查看详情 
"); } }, error: function(xhr, status, error) { console.error("AJAX request failed:", status, error); console.log("Response Text:", xhr.responseText); // 打印完整的响应文本 } });}$(document).ready(function() { displayPosts();});
代码解释：
$.ajax({…}): 发起 AJAX 请求。type: “POST”: 指定请求方法为 POST。url: “main_page.php”: 指定 PHP 脚本的 URL。 确保URL正确，建议使用小写字母命名文件。dataType: “json”: 告诉 jQuery 期望从服务器接收 JSON 数据。这会自动将响应解析为 JavaScript 对象，因此不需要手动使用 JSON.parse()。success: function(response): 请求成功时的回调函数。 response 参数已经是一个 JavaScript 对象，可以直接使用。error: function(xhr, status, error): 请求失败时的回调函数。 务必添加错误处理，打印 xhr.responseText 可以帮助你查看服务器返回的完整错误信息，从而更容易调试问题。$(“#posted”).append(“
” + name + “: ” + user_post + “
“): 一个示例，展示如何将数据添加到 HTML 元素中。你需要根据你的实际 HTML 结构进行调整。
关键点：
dataType: “json”: 设置此选项后，jQuery 会自动解析 JSON 响应。错误处理: 添加 error 回调函数，以便在请求失败时进行调试。URL: 确保 url 指向正确的 PHP 脚本。
HTML 结构
HTML 结构应该包含一个用于显示数据的容器。
Create post:
@@##@@Posts
总结与注意事项
确保 PHP 返回有效的 JSON 数据。 使用 json_encode() 函数，并在结果为空时返回 json_encode([])。在 JavaScript 中设置 dataType: “json”。 这告诉 jQuery 自动解析 JSON 响应。添加错误处理。 在 AJAX 请求的 error 回调函数中打印错误信息。检查 URL 是否正确。 确保 AJAX 请求的 URL 指向正确的 PHP 脚本。使用浏览器的开发者工具进行调试。 查看网络请求和控制台输出，可以帮助你诊断问题。
通过遵循这些步骤，你应该能够成功地使用 PHP 和 AJAX/JSON 将数据传递到 JavaScript 中，并在网页上动态显示。 记住，调试是开发过程中不可或缺的一部分，善用浏览器的开发者工具可以极大地提高你的效率。
以上就是使用 PHP 和 AJAX/JSON 将数据传递到 JavaScript 的教程的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1534866.html
微信扫一扫 
支付宝扫一扫 
