如何在Angular.JS中打开JSON / XML文件

直接看代码，如下是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>

如何在Angular.JS中打开JSON / XML文件

猜你喜欢