直接看代码,如下是json测试文件内容(Person.json)
[{'name':'John','surname':'Doe','age':31,'city':'New York'},
{'name':'Jane','surname':'Doe','age':26,'city':'Seattle'},
{'name':'Dave','surname':'Smith','age':45,'city':'LA'},
{'name':'Alessia','surname':'Smith','age':41,'city':'Texas'}]
以下为xml测试文件内容(Books.xml)
<bookstore>
<book>
<title>Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
</book>
<book>
<title>La uruguaya</title>
<author>Pedro Mairal</author>
<year>2016</year>
</book>
</bookstore>
HTML代码
<!DOCTYPE html>
<html>
<head>
<title>WebData Call Test</title>
<!-- It's better if you can download it and use the local file... -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
// The JSON call code...
var JSONreq = {
method: 'get',
// The local JSON File...
url: 'Persons.json',
headers: {
'Access-Control-Allow-Origin': '*',
'cache-control': 'no-cache',
'X-PINGOTHER': 'pingpong',
'Content-Type': 'application/json'
}
};
$scope.webJSONData = "JSON Call Test!";
$http.get(JSONreq).then(function(res) {
$scope.webJSONData = res.data;
},function() {
$scope.webJSONData = "JSON Call error!";
});
// The XML call code...
var XMLreq = {
method: 'get',
// The local XML File...
url: 'Books.xml',
headers: {
'Access-Control-Allow-Origin': '*',
'cache-control': 'no-cache',
'X-PINGOTHER': 'pingpong',
'Content-Type': 'application/xml'
}
};
$scope.webXMLData = "XML Call Test!";
$http.get(XMLreq).then(function(res) {
$scope.webXMLData = res.data;
},function() {
$scope.webXMLData = "XML Call error!";
});
});
</script>
</head>
<body>
<h1>WebData Call Test</h1>
<br />
<hr />
<br />
<br />
<div ng-app="myApp" ng-controller="myCtrl">
webJSONData: {{ webJSONData }}
<br />
<br />
webXMLData: {{ webXMLData }}
</div>
</body>
</html>