基于Bootstrap+Ajax+Mustache实现JSON数据渲染HTML页面

我来帮你把这个需求落地成可运行的完整方案，一步步拆解：

一、先搞定依赖资源 #

首先得在HTML里引入必要的工具库，确保Bootstrap样式、Ajax请求、模板渲染都能正常工作：

<!-- Bootstrap CSS（确保布局美观） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery（简化Ajax请求写法） -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- Mustache.js（处理模板渲染） -->
<script src="https://cdn.jsdelivr.net/npm/mustache@4.2.0/dist/mustache.min.js"></script>
<!-- Bootstrap JS（支持交互组件） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

二、完善你的Mustache模板 #

我把你写的模板补全，还加入了Bootstrap的Card组件让布局更规整，同时加上循环标签支持批量渲染数据：

<!-- Mustache模板 -->
<script id="plutos" type="text/template">
  {{#items}} <!-- 遍历JSON数组里的每一条数据 -->
  <div class="col-sm-12 col-md-6 col-xl-4 mb-4"> <!-- 响应式列+底部间距 -->
    <div class="card h-100"> <!-- 卡片组件，确保高度统一 -->
      <h3 class="card-header text-center">{{title}}</h3>
      <img src="{{picture}}" class="card-img-top" alt="{{title}}"> <!-- 卡片顶部图片 -->
      <div class="card-body">
        <p class="card-text text-center">{{plot}}</p>
        <button type="button" class="btn btn-primary btn-sm w-100">查看详情</button> <!-- 全屏宽按钮 -->
      </div>
    </div>
  </div>
  {{/items}} <!-- 结束遍历 -->
</script>

<!-- 用来放渲染结果的容器 -->
<div id="content-container" class="row g-4"></div>

三、Ajax请求+模板渲染代码 #

用jQuery写Ajax请求，从JSON文件拿数据，再用Mustache把数据塞进模板里渲染到页面：

$(document).ready(function() {
  // 发起Ajax请求获取JSON数据
  $.ajax({
    url: 'your-data.json', // 替换成你的JSON文件实际路径
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      // 1. 获取模板内容
      var template = $('#plutos').html();
      // 2. 把JSON数组包装成Mustache需要的对象格式
      var renderData = { items: data };
      // 3. 渲染模板生成HTML
      var renderedHtml = Mustache.render(template, renderData);
      // 4. 把渲染好的内容插入到容器里
      $('#content-container').html(renderedHtml);
    },
    error: function(xhr, status, error) {
      // 请求失败时的提示
      console.error('数据加载出错:', error);
      $('#content-container').html('<p class="text-center text-danger mt-5">数据加载失败，请稍后重试</p>');
    }
  });
});

四、JSON数据示例 #

你的your-data.json文件结构大概是这样的（数组格式，每个元素对应一条数据）：

[
  {
    "title": "星际探索",
    "picture": "images/space.jpg",
    "plot": "讲述宇航员穿越太阳系寻找失踪父亲的故事，充满对宇宙和人性的思考。"
  },
  {
    "title": "深海秘境",
    "picture": "images/ocean.jpg",
    "plot": "跟随科考队潜入马里亚纳海沟，揭开深海生物和地质奇观的神秘面纱。"
  }
]

几个关键提醒 #

• 路径要对：确保your-data.json的路径和HTML文件的相对位置正确，比如都在根目录下就直接写文件名。
• 避免跨域问题：本地直接打开HTML（file://协议）可能会被浏览器拦截Ajax请求，建议用本地服务器（比如VSCode的Live Server插件、XAMPP）来运行项目。
• 变量名要匹配：模板里的{{title}}、{{picture}}必须和JSON里的键完全一致（大小写敏感）。
• 响应式适配：模板里的col-sm-12 col-md-6 col-xl-4已经实现了响应式，手机上一行1个，平板一行2个，大屏一行3个。

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