Bootstrap Table无法读取本地JSON文件，寻求技术解决方案

我来帮你梳理并解决这个问题，先拆解下你代码里的关键问题，再给出针对性的修复方案：

问题分析 #

你当前的代码存在几个冲突和错误，导致表格无法正常工作：

1. 数据源方式冲突：你同时在HTML里用了data-url="data.json"声明外部数据源，又在JS里通过$table.bootstrapTable({data: data})手动传入本地数据，这两种方式会互相干扰，Bootstrap Table无法确定使用哪个数据源。
2. 本地跨域限制：直接用浏览器打开本地HTML文件（file://协议）时，浏览器的安全策略会阻止AJAX请求本地JSON文件，这是data-url加载失败的核心原因之一。
3. 语法错误：代码里$table.bootstrapTable('refresh',{data: data})后面多了一个多余的})，且这行代码位置错误（在DOM Ready函数之外），会导致JS解析报错。
4. 缺失依赖：Bootstrap Table依赖jQuery，但你之前的代码没有引入jQuery库，这会导致表格无法初始化。

解决方案 #

根据你的需求，分两种场景给出修复方案：

场景1：加载外部本地JSON文件（data.json） #

要解决本地跨域问题，你需要用本地服务器运行项目（比如Python的SimpleHTTPServer、Node.js的http-server，或是XAMPP这类工具），然后按以下方式修改代码：

1. 确保data.json文件和HTML文件在同一目录，内容为合法的JSON数组：

[{"id":1,"oeuvre":"choppe","type":"Ambre","artist":"Etienne","sheet":"<a href=\"description.html\">查看详情</a>"}]

2. 修改HTML和JS代码，去掉手动传入数据的逻辑，只保留data-url：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>

<table id="table" data-toggle="table" data-height="460" data-search="true" data-url="data.json">
  <thead>
    <tr>
      <th data-field="id">#</th>
      <th data-field="oeuvre" data-search-formatter="false" data-formatter="nameFormatter">Oeuvres</th>
      <th data-field="type" data-formatter="nameFormatter">Type</th>
      <th data-field="artist" data-formatter="nameFormatter">Artiste</th>
      <th data-field="sheet">Fiche</th>
    </tr>
  </thead>
</table>

<script>
function nameFormatter(value) {
  return 'Formatted ' + value;
}

$(function() {
  var $table = $('#table');
  // 无需手动初始化data，data-url会自动加载外部JSON
});
</script>

场景2：直接使用JS变量中的数据源 #

如果你不想依赖外部JSON文件，直接用JS里的本地数据，修改如下：

1. 去掉HTML里的data-url属性；
2. 修正语法错误，确保初始化代码在DOM Ready函数内：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>

<table id="table" data-toggle="table" data-height="460" data-search="true">
  <thead>
    <tr>
      <th data-field="id">#</th>
      <th data-field="oeuvre" data-search-formatter="false" data-formatter="nameFormatter">Oeuvres</th>
      <th data-field="type" data-formatter="nameFormatter">Type</th>
      <th data-field="artist" data-formatter="nameFormatter">Artiste</th>
      <th data-field="sheet">Fiche</th>
    </tr>
  </thead>
</table>

<script>
function nameFormatter(value) {
  return 'Formatted ' + value;
}

$(function() {
  var $table = $('#table');
  var data = [ {"id":1,"oeuvre":"choppe","type":"Ambre","artist":"Etienne","sheet":"<a href=\"description.html\">查看详情</a>"} ];
  $table.bootstrapTable({data: data});
});
</script>

关键注意事项 #

• 必须引入jQuery：Bootstrap Table依赖jQuery，缺失这个库会导致表格功能完全失效。
• 本地开发用服务器：永远不要用file://协议打开HTML文件测试AJAX相关功能，浏览器的同源策略会阻止这类请求。
• JSON格式要正确：外部JSON文件必须是合法的JSON格式，不能有语法错误（比如多余的逗号、引号不匹配）。

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