如何通过jQuery AJAX加载JSON数据至HTML校园活动展示项目？

核心问题排查与修复步骤 #

• 确认AJAX请求路径正确性
  检查info.json文件的实际存放路径，确保AJAX请求中的url参数和文件路径完全匹配。比如文件放在项目根目录，请求路径就写./info.json；如果在data子文件夹，就写./data/info.json。同时建议在AJAX的error回调里打印错误信息，方便定位问题：

  $.ajax({
    url: './info.json',
    dataType: 'json',
    success: function(data) { /* 处理逻辑 */ },
    error: function(xhr, status, err) {
      console.log('请求出错:', err); // 控制台查看具体错误
    }
  });
  

• 校验JSON数据格式合法性
  手动检查info.json的语法：确保所有字符串用双引号、数组/对象末尾没有多余逗号、键值对格式正确。如果有语法错误，AJAX会解析失败导致无数据渲染。

• 修正HTML拼接逻辑
  按照预期的页面结构，循环遍历JSON数据时精准拼接每个活动的时间、场次和详情区块，避免标签嵌套错误或字段名不匹配。示例：

  success: function(activityData) {
    let htmlStr = '';
    // 假设activityData是活动数组，每个元素包含holdTime、session、detail字段
    activityData.forEach(item => {
      htmlStr += `
        <div class="activity-box">
          <h4>${item.holdTime}</h4>
          <p>场次：${item.session}</p>
          <div class="activity-desc">${item.detail}</div>
        </div>
      `;
    });
    // 把拼接好的HTML插入页面指定容器
    $('#activity-container').html(htmlStr);
  }
  

• 补充缺失的CSS样式
  当前页面显示和预期差异大，大概率是拼接出的HTML元素没有对应样式支持。检查是否给.activity-box、.activity-desc等类名写了正确的CSS规则，比如布局、字体、间距等样式。

完整修正示例 #

index.js 修正代码 #

$(function() {
  $.ajax({
    url: './info.json',
    type: 'GET',
    dataType: 'json',
    success: function(activities) {
      const $container = $('#activity-wrap');
      let content = '';
      activities.forEach(act => {
        content += `
          <div class="activity-card">
            <div class="time-tag">${act.holdTime}</div>
            <div class="session-info">场次：${act.session}</div>
            <div class="detail-text">${act.detail}</div>
          </div>
        `;
      });
      $container.html(content);
    },
    error: function(err) {
      console.error('活动数据加载失败:', err);
      $('#activity-wrap').html('<p>数据加载失败，请稍后重试</p>');
    }
  });
});

Inicio.html 需包含的容器 #

<!-- 确保页面有这个容器用于渲染活动内容 -->
<div id="activity-wrap"></div>

标准格式的info.json示例 #

[
  {
    "holdTime": "2024-05-20 14:30",
    "session": "第一场",
    "detail": "校园公益义卖，地点在食堂门口，所得款项捐赠给山区学校"
  },
  {
    "holdTime": "2024-05-21 10:00",
    "session": "第二场",
    "detail": "机器人竞赛展演，面向全校开放，地点在体育馆一楼"
  }
]

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