我有.json
后端创建的文件。现在,我试图使用Ajax请求,Angular.js
以便前端可以使用.json
文件中的数据。
这是我的.json
文件的路径:
C:\Users\Mykhaylo Vayvala\Desktop\carBuyer\topCarObj.json
这是我的html文件:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>Top cars</title>
<head>
<body ng-controller="PostsCtrl">
<p>{{posts}}</p>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="carApp.js"></script>
</body>
</html>
这是我使用Angular.js的JavaScript文件:
var app = angular.module("MyApp", []);
app.controller("PostsCtrl", function($scope, $http) {
$http.get('topCarObj.json').
success(function(data, status, headers, config) {
$scope.posts = data;
}).
error(function(data, status, headers, config) {
alert("AJAX failed")
});
});
当我在浏览器中运行html文件时,在控制台中出现以下错误:
XMLHttpRequest cannot load file:///C:/Users/Mykhaylo%20Vayvala/Desktop/carBuyer/topCarObj.json. Cross origin requests are only supported for HTTP. angular.min.js:78
Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/Mykhaylo%20Vayvala/Desktop/carBuyer/topCarObj.json'.
at Error (native)
at file:///C:/Users/Mykhaylo%20Vayvala/Desktop/carBuyer/angular.min.js:78:466
at v (file:///C:/Users/Mykhaylo%20Vayvala/Desktop/carBuyer/angular.min.js:73:464)
at g (file:///C:/Users/Mykhaylo%20Vayvala/Desktop/carBuyer/angular.min.js:71:294)
at I (file:///C:/Users/Mykhaylo%20Vayvala/Desktop/carBuyer/angular.min.js:100:144)
at I (file:///C:/Users/Mykhaylo%20Vayvala/Desktop/carBuyer/angular.min.js:100:144)
at file:///C:/Users/Mykhaylo%20Vayvala/Desktop/carBuyer/angular.min.js:101:308
at k.$eval (file:///C:/Users/Mykhaylo%20Vayvala/Desktop/carBuyer/angular.min.js:112:32)
at k.$digest (file:///C:/Users/Mykhaylo%20Vayvala/Desktop/carBuyer/angular.min.js:109:121)
at k.$apply (file:///C:/Users/Mykhaylo%20Vayvala/Desktop/carBuyer/angular.min.js:112:362)
我做错了什么,该如何解决?
将应用程序托管到localhost或在其他浏览器上尝试。
对于chrome,您可以通过以下方式允许它:
chrome.exe --allow-file-access-from-files
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句