如何在JavaScript中加载外部JSON文件？$.getJSON报错求助

嘿，这个报错其实很常见，我来一步步帮你排查解决：

最可能的原因：没加载jQuery库 #

$.getJSON是jQuery专属的方法，不是原生JS自带的。所以首先得确认你的页面里已经正确引入了jQuery，而且引入顺序要对——必须在你的table.js之前加载jQuery，不然table.js运行的时候还找不到$这个对象呢。

举个正确的引入例子：

<!-- 先引入jQuery，用CDN或者本地文件都可以 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 再引入你的table.js -->
<script src="table.js"></script>

如果你用了jQuery的noConflict模式 #

有些项目为了避免$和其他框架冲突，会用jQuery.noConflict()释放$的控制权，这时候$就不再代表jQuery了，自然会报错。这时候有两种解决办法：

• 直接用jQuery.getJSON()代替$.getJSON()：

  jQuery.getJSON("data.json", function(data) {
    // 这里写你的数据处理逻辑
  });
  

• 给jQuery重新起个别名：

  var $j = jQuery.noConflict();
  $j.getJSON("data.json", function(data) {
    // 数据处理逻辑
  });
  

不想用jQuery？试试原生JS的fetch API #

要是你不想依赖jQuery，也完全可以用现代浏览器都支持的原生fetch来加载JSON，代码也很简洁：

fetch("data.json")
  .then(response => {
    if (!response.ok) {
      throw new Error("加载JSON失败，网络响应异常");
    }
    return response.json();
  })
  .then(data => {
    // 拿到数据后，和你之前的处理逻辑一样就行
    console.log("加载到的数据：", data);
  })
  .catch(error => {
    console.error("出错啦：", error);
  });

最后再检查两个小细节 #

• 确认data.json的文件路径是对的：如果table.js在js/文件夹，data.json也在js/里，路径就是"data.json"；如果在项目根目录，就用"/data.json"。
• 本地打开HTML（file://协议）可能有跨域限制：这时候建议用本地服务器运行，比如VS Code的Live Server插件，或者Node.js的http-server工具，这样就能正常加载本地JSON文件啦。

内容的提问来源于stack exchange，提问作者j.doe