新手技术求助：如何用JavaScript+JSON获取服务器PHP数组文件及解决相关问题

Hey there! Let's tackle each of your issues one by one to get your code working smoothly.

1. CORS Policy 报错问题 #

这个报错是浏览器同源策略在起作用：你的前端代码跑在http://localhost:8084，但请求的PHP文件在http://evercodeplus.com，属于不同域名，浏览器默认会阻止这种跨域请求。

解决方法：在你的get_products.php文件开头添加CORS允许头部
在PHP文件最顶部（任何输出之前）加上这段代码：

<?php
// 允许你的前端域名访问，生产环境建议指定具体域名，不要用*
header("Access-Control-Allow-Origin: http://localhost:8084");
// 允许常用的请求方法
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
// 允许必要的请求头
header("Access-Control-Allow-Headers: Content-Type");

// 示例：模拟产品数组
$products = [
    ["name" => "Wireless Headphones"],
    ["name" => "Smart Watch"],
    ["name" => "Portable Charger"]
];

// 用json_encode把PHP数组转为JSON格式输出
echo json_encode($products);
?>

2. pro.insertAdjacentHTML 无法工作的原因 #

你的代码里有两个明显问题：

• 没有定义pro变量，需要先获取对应的DOM元素
• 把变量htmlString用单引号包裹了，变成了字符串'htmlString'而不是变量本身的值

修改后的showHTML函数应该是这样：

function showHTML(data) {
    var htmlString = "";
    for(let i=0; i<data.length; i++) { // 用let声明i，避免全局变量污染
        htmlString += "<li>" + data[i].name + "</li>"; // 用li嵌套在ul里，结构更合理
    }
    var pro = document.getElementById("product"); // 先获取目标DOM元素
    pro.innerHTML = htmlString;
    // 如果需要追加内容，直接传变量htmlString，不要加引号
    // pro.insertAdjacentHTML('beforeend', htmlString);
}

注意：你之前用ul包裹每个产品名，会生成多个独立的ul标签，不符合HTML结构规范，上面的代码已经调整为一个ul包含多个li的正确结构。

3. 如何使用json_encode #

json_encode是PHP的内置函数，专门用来把PHP数组（或对象）转换成JSON格式的字符串，这样前端JavaScript就能轻松解析使用。

基础用法示例：

// 定义一个PHP关联数组
$userInfo = [
    "id" => 101,
    "username" => "armani",
    "joinDate" => "2024-01-01"
];

// 把数组转为JSON字符串并输出
echo json_encode($userInfo);

输出的内容会是标准JSON格式：

{"id":101,"username":"armani","joinDate":"2024-01-01"}

前端JS通过JSON.parse()就能把这个字符串转换成可操作的JavaScript对象。

4. 能否通过JSON在JavaScript中获取服务器上的PHP数组并展示？ #

当然可以！这正是你当前代码的核心目标，完整流程是：

1. 在PHP文件中定义数组，用json_encode转为JSON格式输出
2. 前端用XMLHttpRequest（或更现代的fetch API）请求这个PHP文件
3. 把返回的JSON字符串解析成JS对象/数组，然后渲染到页面上

你现有的代码框架是正确的，只要解决前面提到的CORS和DOM操作问题，就能正常展示数据了。

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