HTML页面加载JSON数据到表格报错：$.getJSON is not a function如何解决？

这个错误我之前也碰到过，大概率是jQuery引入问题加上代码里的小语法错误导致的，给你一步步梳理解决方案：

1. 排查jQuery的引入问题 #

$.getJSON是jQuery的AJAX核心方法之一，但jQuery的Slim精简版本会移除AJAX、动画等非核心模块，如果你引入的是slim.min.js，肯定会触发这个错误。

• 错误的引入方式（Slim版）：

  <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
  

• 换成完整版本的jQuery：

  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  

同时要注意：jQuery的<script>标签必须放在你自己的JS代码之前，浏览器是按顺序加载脚本的，如果你的代码先加载，jQuery还没初始化，$就不是jQuery对象，自然找不到getJSON方法。

2. 修复代码中的语法错误 #

你贴的代码里有两处语法问题，虽然不是直接导致getJSON错误的原因，但会让整个脚本执行失败：

• $(document).ready(function() 后面缺少左大括号{，正确写法是$(document).ready(function() {
• 拼接HTML的两行代码末尾缺少分号，补上后避免语法解析报错

修复后的完整代码示例 #

<!-- 先引入完整版本的jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function() {
  $.getJSON("Info.json", function(data) {
    var Employee_info = '';
    $.each(data, function(key, value) {
      Employee_info += '<tr>';
      Employee_info += '<td>' + value.Name + '</td>';
      Employee_info += '<td>' + value.Address + '</td>';
      Employee_info += '<td>' + value.Gender + '</td>';
      Employee_info += '<td>' + value.Designation + '</td>';
      Employee_info += '<td>' + value.Age + '</td>';
      Employee_info += '</tr>';
    });
    $('#Employee_table').append(Employee_info);
  });
});
</script>

最后再确认下你的Info.json文件路径是否正确，要保证它和HTML页面在同一目录下，或者路径写对绝对/相对路径，避免AJAX请求找不到文件的问题。

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