XAMPP环境下如何加载JSON文件并提取指定内容输出到HTML对应div

你已经可以通过XHR拿到JSON的responseText，只需增加JSON字符串转对象、字段读取、DOM赋值三个步骤即可完成需求。

步骤1：准备HTML容器 #

提前在页面中定义好用于展示内容的div，设置唯一id方便JS定位：

<div id="los1-zustand"></div>
<div id="los1-gewinnklasse"></div>
<div id="los1-preis"></div>
<div id="los2-zustand"></div>
<div id="los2-gewinnklasse"></div>
<div id="los2-preis"></div>

步骤2：补充XHR处理逻辑 #

在你现有XHR请求的onload回调中增加解析和赋值代码：

const xhr = new XMLHttpRequest();
// 替换为你的JSON文件实际服务器路径
xhr.open('GET', './los-data.json', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    // 将返回的JSON字符串转为可操作的JS对象
    const losData = JSON.parse(xhr.responseText);
    
    // 读取lose数组下第一条数据的对应字段，写入对应div
    document.getElementById('los1-zustand').textContent = losData.lose[0].Zustand;
    document.getElementById('los1-gewinnklasse').textContent = losData.lose[0].Gewinnklasse;
    document.getElementById('los1-preis').textContent = losData.lose[0].Preis + '€';

    // 读取lose数组下第二条数据的对应字段，写入对应div
    document.getElementById('los2-zustand').textContent = losData.lose[1].Zustand;
    document.getElementById('los2-gewinnklasse').textContent = losData.lose[1].Gewinnklasse;
    document.getElementById('los2-preis').textContent = losData.lose[1].Preis + '€';
  }
}
xhr.send();

注意事项 #

• 请先补全你的JSON文件的闭合符号，你给出的示例缺少]}，格式不合法会导致JSON.parse执行报错
• 如果你需要批量输出所有lose数组的内容，可以用forEach遍历数组动态生成div，不需要提前写死容器：

// 页面只需留一个父容器<div id="los-container"></div>
const container = document.getElementById('los-container');
losData.lose.forEach(item => {
  const itemDiv = document.createElement('div');
  itemDiv.textContent = `奖券编号${item.Losnummer}：状态${item.Zustand}，等级${item.Gewinnklasse}，奖金${item.Preis}€`;
  container.appendChild(itemDiv);
})

可选PHP实现方案 #

如果想用服务端渲染的方式实现，直接用PHP读取JSON文件解析后输出即可：

<?php
// 读取服务器上的JSON文件，路径替换为实际路径
$json = file_get_contents('./los-data.json');
$losData = json_decode($json, true);
?>

<!-- 直接在对应位置输出字段 -->
<div>奖券1 奖金：<?php echo $losData['lose'][0]['Preis'] ?>€</div>
<div>奖券2 等级：<?php echo $losData['lose'][1]['Gewinnklasse'] ?></div>

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