Javascript 获取此错误：未定义UncaughtReferenceError:$；未能加载资源：服务器以404状态响应

必须在其中上载JSON文件的引导表

  <div class="container mt-2 mb-2">
    <table
      class="tableprocessor"
      data-toggle="table"
      data-pagination="true"
      data-search="true"
      data-search-align="left"
      data-show-column="true"
      data-show-toggle="true"
      data-show-refresh="true"
      data-show-fullscreen="true"
      data-show-pagination-switch="true"
      data-pagination-pre-text="Previous"
      data-pagination-next-text="Next"
      data-pagination-h-align="left"
      data-pagination-detail-h-align="right"
      data-page-list="[5, 10, 15, All]"
      data-url="processor.json">
      <thead>
        <tr>
          <th rowspan="2" data-checkbox="true" data-valign="middle"></th>
          <th colspan="8" data-align="center">Header</th>
        </tr>
        <tr>
          <th data-sortable="true" data-switchable="false">Brand</th>
          <th data-sortable="true" data-switchable="false">Name</th>
          <th data-sortable="true">Core Count</th>
          <th data-sortable="true">Core Speed</th>
          <th data-sortable="true">TDP</th>
          <th data-sortable="true">Price</th>
          <th data-sortable="false">Rating</th>
          <th data-sortable="false">Add</th>
        </tr>
      </thead>
    </table>
  </div>

---

在我看来，您的代码中有一些小错误。这个例子会奏效。我删除了对Bootstrap的所有引用，因为它对功能不重要

最重要的更改是：在

$（'tbody'）

上添加html属性，然后在html中添加

元素

我将json文件转换为数据URI进行测试。您只需将长字符串替换为原始文件名（

processor.json

）

$（文档）.ready（函数（）{
$.getJSON("数据：application/json；base64，WwogihskicagicJicFuzzi6Icjbtuqilaogigicagim5HBwUioiaivghyzwfkCmLwKmLwGvYidm5OtByy0LunvcMugmy4WR0H6H6IwkicagicJb3JLU3BLZW7IgIgIgIgIgIgId6IgIgIgIgIgIgIgIgIgIgId6IgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIgIAXBWZXIGMZK3MFGGMCZITQ29YZSAZLJDHSHOILAOGICAGIMCNVVDB3VUDCI6IDYLLAOGICAGIMCVTCGVLZCI6ICIZLJDHSHOILAOGICAGINCINRKCIYODBXIIWKICAGICJWCMLJZSI6ICIYXRPBMCIOIAXMCWKICAGICJHZGQIOIQWRKIGOGI1D”，函数（数据）{
var项目=[]；
$。每个（数据、函数（键、值）{
项目。推送（“”）；
物品。推送（“+val.brand+”）；
items.push（“+val.name+”）；
items.push（“+val.corecont+”）；
推送（“+val.coreSpeed+”）；
项目推送（“+val.tdp+”）；
项目推送（“+val.price+”）；
项目推送（“+val.rating+”）；
items.push（“+val.add+”）；
项目。推送（“”）；
});
$（'tbody'）.html（items.join（“”）.appendTo（“#tableprocessor”）；
});
})；

处理器
标题
烙印
名称
芯数
核心速度
TDP
价格
评级
添加

据我所知，您已经三次包含bootstrap…？4.0.0、4.3.1和4.6.0。但这并不能解释错误，因为链接工作正常，如果我将大量脚本块复制到小提琴中，我可以访问

$

非常好。您如何查看html文件？是否双击它？怎么办？我是ja的新手我只知道html和CSS，这篇文章的标题是“…未捕获引用错误：$未定义；。。。“可能jQuery没有加载。您是在服务器上运行它吗？它是在浏览器中显示

localhost/…

，还是以

file:///...

？不过，我不知道你为什么会出现这样的错误。你的问题目前“不可重现”，因此您需要显示实际的html文件，我只能看到表头，而不是json文件中存储的数据，右键单击页面后，我会得到错误main.js:16 UncaughtReferenceError:$未在main.js:16中定义。OP的一个具体问题是如何正确加载服务器端json文件。你的答案并没有提到这一点。事实上，我也想知道，你更正的参考资料必须贴在标签上。JSON文件脚本也在MAIN.js中，它链接在head标记下。这是正确的方式吗？@ChrisG我知道，但在这里很难表现出来。@SantoshChauhan是的，这是正确的。但是，你的JS正在进入一个新的阶段，在你操作它之前，确保文档已经被加载。添加$（document）.ready（函数（）{….}）；围绕最初要运行的代码。我更新了我的答案谢谢你@chrwahl的帮助

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/locale/bootstrap-table-en-US.min.js" integrity="sha512-VyHDnIKFpnUT870o8K2eftG/+OvDM+8OPZRP9oNnkInxtjM5aKGd6DTWHkGVp9QjsyI7kZZOWuiBAwvMRuTnJg==" crossorigin="anonymous"></script> 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<script type="text/javascript">
  $.getJSON("processor.json", function(data){
    var items = [];
    $.each(data, function(key, val){
      items.push("<tr>");
      items.push("<td id=''"+key+"''>"+val.brand+"</td>");
      items.push("<td id=''"+key+"''>"+val.name+"</td>");
      items.push("<td id=''"+key+"''>"+val.coreCount+"</td>");
      items.push("<td id=''"+key+"''>"+val.coreSpeed+"</td>");
      items.push("<td id=''"+key+"''>"+val.tdp+"</td>");
      items.push("<td id=''"+key+"''>"+val.price+"</td>");
      items.push("<td id=''"+key+"''>"+val.rating+"</td>");
      items.push("<td id=''"+key+"''>"+val.add+"</td>");
      items.push("</tr>");  
   });
   $('tbody/',{html:items.join("")}).appendTo("#tableprocessor");
});
</script>

 [{
   "brand": "AMD",
   "name": "Threadripper 3990X 64-Core 3.0GHz",
   "coreCount": 64,
   "coreSpeed": "3GHz",
   "tdp": "280W",
   "price": "-",
   "rating": 10,
   "add": "Add"
 },
 {
   "brand": "AMD",
   "name": "Threadripper 3970X 32-Core 3.7GHz",
   "coreCount": 32,
   "coreSpeed": "3.7GHz",
   "tdp": "280W",
   "price": "-",
   "Rating": 10,
   "add": "Add"
 }]