如何将PHP生成的JSON对象数据传入独立JS文件的数组中

第一步：修正PHP端代码 #

你原有PHP代码存在两个核心问题：函数内生成的JSON内容是局部变量，没有对外输出；未声明响应格式，JS识别数据容易出错。修正后代码如下：

<?php
function loadApplicationList()
{
    // 注意：当前直接拼接参数到SQL有SQL注入风险，功能跑通后建议改用预处理语句传参
    $email = $_GET['email'];
    $listcontent = queryDB("
    SELECT Application.FavRank, Proposal.Title, Proposal.pdfName, RegisteredUser.Name
    FROM Application
    LEFT JOIN user_application
    ON Application.ID = user_application.ID AND user_application.eMail = '$email'
    LEFT JOIN Proposal
    ON Proposal.ID = Application.Proposal_ID
    LEFT JOIN RegisteredUser
    ON RegisteredUser.eMail = Proposal.AuthorEmail;");
    return $listcontent;
}

// 声明返回内容为JSON格式
header('Content-Type: application/json');
// 输出转码后的JSON数据，加JSON_UNESCAPED_UNICODE参数避免中文乱码
echo json_encode(loadApplicationList(), JSON_UNESCAPED_UNICODE);
exit;
?>

你可以把这段代码存为独立PHP文件（比如命名为get_app_list.php），直接在浏览器访问、传入email参数测试，能看到直接输出的JSON数组内容就说明PHP端正常。

第二步：JS端获取数据存入数组 #

根据你的项目场景选一种方式即可，两种方式都不需要引入额外第三方库，适合初学者使用。

方式1：异步请求接口（适配所有场景，推荐独立JS文件使用） #

在你的独立JS文件中写如下代码，通过原生fetch请求PHP接口拿数据：

// 提前定义存储数据的数组
let data = [];

// 定义数据加载函数
async function initData() {
    try {
        // 地址替换成你自己的PHP文件访问路径，email参数按实际需求传
        const res = await fetch('./get_app_list.php?email=your_account@example.com');
        // 将返回的JSON内容解析为JS原生数组
        const result = await res.json();
        // 赋值给提前定义的data数组
        data = result;
        // 后续所有要操作data数组的逻辑，都可以写在这里，此时数据已经加载完成
        console.log('数据加载完成', data);
    } catch (err) {
        console.error('数据加载失败:', err);
    }
}

// 页面加载完成后执行数据拉取
initData();

方式2：页面渲染时直接注入（适配PHP渲染HTML的传统项目） #

如果你的PHP是直接渲染HTML页面，不需要写接口，可以在引入独立JS文件之前，直接把数据输出到页面全局变量中，JS可以直接同步读取，不用发异步请求：

1. 在HTML页面中，引入独立JS的代码之前加如下代码：

<script>
// 把PHP查询到的数据直接挂载到全局变量
window.applicationData = <?php echo json_encode(loadApplicationList(), JSON_UNESCAPED_UNICODE); ?>;
</script>
<!-- 后面再引入你的独立JS文件 -->
<script src="./your-custom-js-file.js"></script>

2. 在你的独立JS文件中直接读取全局变量赋值即可：

let data = window.applicationData || [];
// 这里可以直接使用data，不需要等待异步加载
console.log('直接读取到的数据', data);

初学者常见踩坑提醒 #

• 路径问题：fetch()中填写的PHP文件路径必须和实际文件存放路径匹配，否则会出现404错误拿不到数据
• 异步执行逻辑：JS网络请求默认是异步执行的，不要在调用initData()后立刻读取data变量，此时数据还没加载完成；数据操作逻辑要写在await res.json()之后，或者用.then()链式调用处理
• 安全风险：示例PHP代码直接将GET参数拼接进SQL语句，存在SQL注入风险，功能调试通后请务必改用PDO/MySQLi的预处理语句绑定参数，不要直接拼接用户可控的输入内容
• 跨域问题：如果你的HTML页面和PHP接口域名/端口不一致，需要在PHP端加跨域头，本地调试一般不会遇到这个问题

内容的提问来源于stack exchange，提问作者GoethesRevenge