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

使用 PHP 和 AJAX/JSON 将数据传递给 JavaScript

花韻仙語

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

原创

624人浏览过

使用 php 和 ajax/json 将数据传递给 javascript

本文将演示如何使用 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免费学习笔记（深入）”；

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 已经是 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>

登录后复制