Javascript 使用js函数将JSON文件中的数据加载到HTML表时出现问题

标题说明了一切，我正在努力使用jquery的js函数将json文件中的数据获取到HTML表中，但是json文件中的数据没有加载到表中。我也在使用bootstrap。 我在访问XMLHttpRequest时出错'file:///C:/Users/Nuno/Desktop/my%20shit/Faculdade/ITW/trabalho%20lab/info.jsonCORS策略已阻止来自源“null”：跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、chrome不受信任、https

JSON:

JS:

$（文档）.ready（函数（）{
$.getJSON（“info.json”），函数（数据）{
var mydata=''；
$。每个（数据、函数（键、值）{
mydata+=''；
mydata+=''值。年龄+''；
mydata+=''值。电子邮件+''；
mydata+=''值。phone+''；
mydata+=''+值.地址+''；
mydata+=''值。语言+''；
mydata+=''；
});
$（'#personalInfo'）。追加（mydata）；
});
});

HTML:

年龄
电子邮件
电话
地址
语言文字

感谢所有帮助，如果您遇到此问题，请检查您的控制台。如果您遇到错误“访问XMLHttpRequest at”file:///C:/Users/Nuno/Desktop/my%20shit/Faculdade/ITW/trabalho%20lab/info.jsonCORS策略已阻止“来自源”的“null”：跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、chrome untrusted、https。“问题不在于代码。”。

---

我使用VS代码中的Live Server扩展使其正常工作。

感谢所有帮助，如果您遇到此问题，请检查您的控制台。如果您遇到错误“访问XMLHttpRequest at”file:///C:/Users/Nuno/Desktop/my%20shit/Faculdade/ITW/trabalho%20lab/info.jsonCORS策略已阻止“来自源”的“null”：跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、chrome untrusted、https。“问题不在于代码。”。

---

我使用VS代码中的Live Server扩展使其正常工作。

我猜您使用的是Chrome。Chrome对通过以file:///开头的xhr请求访问任何文件都有限制

这里有更多信息

建议:

如果您使用的是Google Chrome，那么在文件：///路径上的AJAX永远不会工作是故意的

---

我猜你在用Chrome。Chrome对通过以file:///开头的xhr请求访问任何文件都有限制

这里有更多信息

建议:

如果您使用的是Google Chrome，那么在文件：///路径上的AJAX永远不会工作是故意的

---

您是否可以与我们分享任何错误？console中是否有任何错误？看起来您正在降低密钥的大小写，但json中的密钥是case您的问题是CORS。请确保编辑问题并包含此错误。您可以覆盖chrome安全设置。您还可以安装CORS扩展。一般来说，本地主机是最安全的。对所有备选方案的web搜索应该会很快得到结果。您是否可以与我们共享任何错误？console中是否有任何错误？看起来您正在降低密钥的大小写，但json中的密钥是case。您的问题是CORS。请确保编辑问题并包含此错误。您可以覆盖chrome安全设置。您还可以安装CORS扩展。一般来说，本地主机是最安全的。对所有备选方案的网络搜索应该会很快得到结果。就是这样，谢谢。就是这样，谢谢

[
    {"Age": "18", "Email": "qweqwe@ua.pt", "Phone": "123456789", "Adress": "Lisbon", "Languages": "English, Portuguese, (Limited) Spanish"}
]

    $(document).ready(function(){
  $.getJSON("info.json", function(data){
    var mydata = '';
    $.each(data, function(key,value){
      mydata += '<tr>';
      mydata+= '<td>'+value.age+'</td>';
      mydata+= '<td>'+value.email+'</td>';
      mydata+= '<td>'+value.phone+'</td>';
      mydata+= '<td>'+value.adress+'</td>';
      mydata+= '<td>'+value.languages+'</td>';
      mydata += '</tr>';
    });
    $('#personalInfo').append(mydata);
  });
  });

<div class="table-responsive">
          <table class="table table-bordered table-striped" id="personalInfo"> 
              <tr> 
                <th> 
                  Age
                </th> 
                <th> 
                  Email 
                </th> 
                <th> 
                  Phone 
                </th> 
                <th> 
                  Adress
                </th> 
                <th> 
                  Languages
                </th> 
              </tr> 
          </table> 
        </div>