javascript - 对端点进行 GET 并使用 Angular 打印数据

Question

我正在尝试对我的端点进行 GET 操作并在我的页面中打印数据

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>



<div ng-app="myApp" ng-controller="myCtrl">

  <p>Data is:</p>
  <h1>{{myData}}</h1>

</div>



<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope, $http) {

    var promise = $http({
      method: 'GET',
      url: 'http://d.biossusa.com/api/distributor?key=*****',
      dataType: 'jsonp',
    });

    promise.success(function (data, status, header, config) {
      console.log("status is ", status);
      console.log(config.method + " data is: " + config.data);
      console.log("data is ", data);
      $scope.myData = response.data;

    });

  });

</script>

---

我不断得到

我希望能打印出数据!

https://jsfiddle.net/bheng/b3rgh92v/

当我 curl 这个 url 时:http://d.biossusa.com/api/distributor?key= *****

我得到了很好的结果!

我的 angular 做错了什么？有什么提示吗？

Answer 1

一些观察:

1): 如果您使用外部文件(在其中创建 Angular 模块)，请确保已在 html 中添加脚本文件的引用。

2): 从你的作业中删除回复

$scope.myData = response.data;  //response is undefined, so remove it

应该是

$scope.myData = data;

3) 最后，确保您可以调用该端点 [我收到一条错误消息，提示我无法从 plnkr 的 HTTPS 端点调用 http 端点，因此我更新了 GET URL]。我用不同的 URL 在 plunker 中尝试了您的代码，并且在进行上述更改后它工作正常。这是 plnkr link