使用 PHP 和 AJAX/JSON 将数据传递到 JavaScript 的教程-js教程-PHP中文网

使用 PHP 和 AJAX/JSON 将数据传递到 JavaScript 的教程

花韻仙語

发布： 2025-11-02 17:36:01

原创

485人浏览过

使用 php 和 ajax/json 将数据传递到 javascript 的教程

本文档旨在指导开发者如何使用 PHP 从数据库中检索数据，并通过 AJAX 和 JSON 格式将其传递到 JavaScript 中，以便在网页上动态显示。我们将重点解决常见的 "Unexpected end of JSON input" 错误，并提供清晰的代码示例和步骤说明。

PHP 端：数据检索与 JSON 编码

首先，我们需要在 PHP 中从数据库中检索数据，并将其编码为 JSON 格式。关键在于正确使用 mysqli_fetch_all() 函数，并将结果集转换为关联数组，然后再进行 JSON 编码。

<?php
// 假设 $connection 是有效的数据库连接
function retrieve_post($connection) {
    $sql = "SELECT * FROM tbl_user_posts";
    $result = mysqli_query($connection, $sql);

    // 检查查询是否成功
    if (!$result) {
        die("Query failed: " . mysqli_error($connection));
    }

    // 检查结果集是否为空
    if (mysqli_num_rows($result) > 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 数据。

Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

查看详情

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("<p>" + name + ": " + user_post + "</p>");
            }
        },
        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("<p>" + name + ": " + user_post + "</p>"): 一个示例，展示如何将数据添加到 HTML 元素中。你需要根据你的实际 HTML 结构进行调整。

关键点：

dataType: "json": 设置此选项后，jQuery 会自动解析 JSON 响应。
错误处理: 添加 error 回调函数，以便在请求失败时进行调试。
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">
    </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>
        <div class="options">
            <a href="">Like</a>
            <a href="">Comment</a>
            <a href="" class="report">Report</a>
        </div>
    </div>
</div>

登录后复制