如何在 AngularJS 中发出 http 请求以提供 JSON 数据格式？答案

【问题标题】：How to make http request in AngularJS for give JSON data formate?如何在 AngularJS 中发出 http 请求以提供 JSON 数据格式？
【发布时间】：2015-06-23 10:39:01
【问题描述】：

我想制作 angularjs 应用程序来发出 http 请求，我制作以下代码 (index.html) 来使用 angularjs 发出 JSON 数据的 http 请求。但它没有打印 json 数据。

在 Firefox 的控制台中，我收到 以下警告（同源
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8080/admin/metering/samples?meter=instance&group_by=project&stats_attr=avg&date_options=7&date_from=&date_to=. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

我有以下格式的 josn 数据。网址是 http://127.0.0.1:8080/admin/metering/samples?meter=instance&group_by=project&stats_attr=avg&date_options=7&date_from=&date_to=

{
    "series": [
        {
            "meter": "instance",
            "data": [
                {
                    "y": 1,
                    "x": "2015-06-17T09:52:17"
                },
                {
                    "y": 1,
                    "x": "2015-06-18T09:57:40"
                },
                {
                    "y": 1,
                    "x": "2015-06-19T09:55:29"
                },
                {
                    "y": 1,
                    "x": "2015-06-20T09:59:43"
                },
                {
                    "y": 1,
                    "x": "2015-06-21T05:35:26"
                },
                {
                    "y": 1,
                    "x": "2015-06-22T09:56:47"
                },
                {
                    "y": 1,
                    "x": "2015-06-23T09:55:07"
                }
            ],
            "name": "demo",
            "unit": "instance"
        }
    ],
    "settings": {}
}

Index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>

 <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body>
  <div ng-app="myApp" ng-controller="customersCtrl">
    <ul>
      <li ng-repeat="value in meters">
        {{value.x+','+value.y}}
      </li>
    </ul>
  </div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
      $http.get("http://127.0.0.1:8080/admin/metering/samples?meter=instance&group_by=project&stats_attr=avg&date_options=7&date_from=&date_to=")
        .success(function(response) {
          console.log(response.series[0].data)
          $scope.meters = response.series[0].data;
        });
    });
  </script>
</body>

</html>

【问题讨论】：

请检查我的 plunker 它可能会有所帮助:)

标签： javascript json angularjs

【解决方案1】：

请更改

 var app=angular.module('myApp',[]);

和

<li ng-repeat="value in meters.series.data">
{{value.x}} -- {{value.y}}
</li>

【讨论】：

【解决方案2】：

错字：- 更改myyApp to myapp

 var app=angular.module('myApp',[]);

一些逻辑问题也已修复，请检查plunker。

更改$scope.meters=response.records;给$scope.meters=response.series[0].data;

ng-repeat 应该是这样的：-

<li ng-repeat="value in meters">
                         {{value.x+','+value.y}}
                    </li>

更新Plunker

【讨论】：

是的，当我在本地系统中创建文件名“data.json”时，您的代码正在运行。但是当我用 url 替换“data.json”时，相同的代码不起作用。请查看我的网址，这是提供 json 数据的同一用户，请帮助我，谢谢............
跨源请求被阻止：同源策略不允许读取@squiroid 我正在使用这个工作`127.0.0.1:8080/admin/metering/… 的远程资源。（原因：CORS 标头“Access-Control-Allow-Origin”缺失）。'
告诉我您的服务器您使用的是哪种语言？