Question

我有一个JSON文件，我想使用Angular.JS加载它。目前我正在使用下面的代码，它正在完美地加载本地JSON文件数据。但是我想在不同的服务器中加载相同的JSON文件。你能帮我从不同的服务器加载相同的JSON文件吗？我将非常感谢你的帮助。

// JS

angular.module('list', []);

function ListCtrl($scope, $http) {
$http({
method: 'GET',
url: 'http://mywebsite/json_price_1.json?callback=angular.callbacks._1'
}).success(function(data) {
$scope.posts = data.posts; // response data
$scope.categories = [];
angular.forEach(data.posts, function(artist, index) {
  angular.forEach(artist.categories, function(album, index){
    $scope.categories.push(album);
  });
});
});
}

// HTML

<div ng-controller="ListCtrl">
<ul ng-repeat="artist in posts">
  <li>{{artist.slug}}</li>
</ul>
</div>

<h3>List of Albums</h3>

<div ng-controller="ListCtrl">
<ul ng-repeat="album in categories">
  <li>{{album.name}}</li>
</ul>
</div>

// JSON文件

      {
"found": 22,
"posts": [
    {
        "ID": 85,
        "site_ID": 1,
        "author": {
            "ID": 1,
            "email": false,
            "name": "admin",
            "URL": "",
            "avatar_URL": "http:\/\/0.gravatar.com\/avatar\/aceb79084bb744b314d7af6485d80f72?s=96&d=http%3A%2F%2F0.gravatar.com%2Favatar%12345%3Fs%3D96&r=G",
            "profile_URL": "http:\/\/en.gravatar.com\/12345"
        },
        "date": "2014-06-06T15:00:12+00:00",
        "modified": "2014-06-06T15:00:12+00:00",
        "title": "Article22",
        "URL": "http:\/\/mywebsite.com\/tankers\/abc\/article22\/",
        "short_URL": "http:\/\/wp.me\/123-1n",
        "content": "<p>ar 16 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.<\/p>\n",
        "excerpt": "<p>ar 16 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex &hellip; <a href=\"http:\/\/mywebsite.com\/tankers\/abc\/article22\/\">Read More<\/a><\/p>\n",
        "slug": "article22",
        "guid": "http:\/\/mywebsite.com\/?p=85",
        "status": "publish",
        "sticky": false,
        "password": "",
        "parent": false,
        "type": "post",
        "comments_open": true,
        "pings_open": true,
        "likes_enabled": true,
        "sharing_enabled": true,
        "gplusauthorship_enabled": false,
        "comment_count": 0,
        "like_count": 0,
        "i_like": false,
        "is_reblogged": false,
        "is_following": false,
        "global_ID": "1234567890",
        "featured_image": "http:\/\/mywebsite.com\/wp-content\/uploads\/2014\/06\/article1.jpg",
        "format": "standard",
        "geo": false,
        "publicize_URLs": [

        ],
        "tags": {

        },
        "categories": {
            "Abc": {
                "name": "abc",
                "slug": "abc",
                "description": "",
                "post_count": 7,
                "meta": {
                    "links": {
                        "self": "https:\/\/public-api.wordpress.com\/rest\/v1\/sites\/1111\/categories\/slug:aframax",
                        "help": "https:\/\/public-api.wordpress.com\/rest\/v1\/sites\/1111\/categories\/slug:aframax\/help",
                        "site": "https:\/\/public-api.wordpress.com\/rest\/v1\/sites\/1111"
                    }
                }
            }
        },

Answer 1

要做xdomain（跨域），你需要做一个JSONP

http://en.wikipedia.org/wiki/JSONP jsonp一般信息

https://docs.angularjs.org/api/ng/service/ $ http＃jsonp angularjs http.jsonp implementation

虽然如果其他服务器上的命名文件不属于您，并且您无法将其更改为jsonp，那么您只能使用后端解决方案

Answer 2

你在角度......中制作这样的jsonp（跨域请求）

var url = $http.jsonp('http://mywebsite/json_price_1.json&callback=JSON_CALLBACK');

然后在成功函数中迭代数据

url.success(function(data) {
           //foreach statement
});

如果你有wordpress网站 - 你应该使用它来允许跨域ajax并构建API：http://wordpress.org/plugins/json-api/

加载跨域JSON文件

2 个答案: