为什么本地Json文件内容未在html页面中显示？

我想通过使用AngularJs（ng-Reapeat）显示json文件的内容我的问题是，html页面无法显示Json文件的内容，它是空白的！我在本地驱动器上有名为JsonData.json的Json文件。我也改变了文件的地址，但它不起作用。为什么本地Json文件内容未在html页面中显示？

这里是我的代码：

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <script src="Scripts/angular.js"></script> 
     <script> 

      var test = angular.module("myApp", []); 
      test.controller("customersCtrl", function ($scope, $http) { 
       $http.get("~/Models/JsonData.json").success(function (response) { $scope.names = response.data.records; }); 
      }); 
     </script> 

    </head> 
    <body> 
     <div ng-app="myApp"> 
      <div ng-controller="customersCtrl"> 
       <table> 
        <tr ng-repeat="x in names"> 
         <td>{{ x.Name }}</td> 
         <td>{{ x.Country }}</td> 
        </tr> 
       </table> 
      </div> 
     </div> 
    </body> 
</html>

，这是我的JSON文件：

{ 
    "records": [ 
    { 
     "Name": "Alfreds Futterkiste", 
     "City": "Berlin", 
     "Country": "Germany" 
    }, 
    { 
     "Name": "Berglunds snabbköp", 
     "City": "Luleå", 
     "Country": "Sweden" 
    }, 
    { 
     "Name": "Wolski Zajazd", 
     "City": "Warszawa", 
     "Country": "Poland" 
    } 
    ] 
}

来源

2017-02-24 Mo Sharaf

控制台devtools上的任何错误？ – lealceldeiro

这是一个CORS问题 - 您不希望您的浏览器访问您的本地文件系统，是吗？ – chazsolo

on $'http.get（“〜/ Models/JsonData.json”）。success（function（response）{$ scope.names = response.data.records;}）;''response''实际上是您的响应数据，而不是响应本身，因为你使用'success'而不是'then' – lealceldeiro

在许多（不是所有）浏览器，从file:// URL提供服务的页面无法让AJAX调用file://网址;这违反了Same Origin Policy。 file://网址全部被定义为具有不匹配任何内容的原始“null”。

和当然，一个从http://提供服务，因为它是跨起源定义和file://的URL不能提供Cross-Origin Resource Sharing头，因为有没有涉及Web服务器不能访问file://路径。

解决方案：从本地Web服务器执行测试，而不是通过文件资源管理器打开的文件。

来源

2017-02-24 17:33:17

为什么本地Json文件内容未在html页面中显示？

回答

相关问题