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/

当我卷曲这个网址时：http://d.biossusa.com/api/distributor?key= *****

我的结果很好！

我的棱角分明怎么办？任何提示？

Answer 1

很少有观察结果：

1）：如果您使用的是外部文件（创建角度模块的位置），请确保已在html中添加了脚本文件的引用。

2）：删除作业中的回复

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

应该是

$scope.myData = data;

3）最后，确保允许您调用该端点[我收到错误，说我无法从plnkr的HTTPS端点调用http端点，因此我更新了GET URL]。我在plunker中使用不同的URL尝试了您的代码，并且上述更改正常。这是plnkr link

Answer 2

JsFiddle javascript set Load type = No wrap - in <body>
删除javascript块中的<script>标记
将response.data更改为data
在http中加载JsFiddle，因为您的终端只允许http

    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 = data;
        });    
      });

http://jsfiddle.net/b3rgh92v/15/

Answer 3

1）首先从javaScript中删除脚本标记。如果你想使用
带有脚本标签的角度代码然后把它放在html文件中，就像我在下面做的那样。但你应该将角度代码保存在单独的文件中。

2）数据很大，这就是加载和成功阻止需要时间的原因约30秒执行。所以在html中打印数据时也一样角度需要几秒钟。

3）使用client.Execute<Foo>(req);代替$scope.myData = data;，因为数据参数中没有收到数据而没有响应（响应不在参数中）

4）当您在角色中的 https 域时，您无法进行 http 来电。在http中加载 jsfiddle ，然后就可以进行http调用。

你的代码没有错。我做了一些必要的修改，见下面的代码。一个有效的工作人员here

$scope.myData = response.data;

以上代码运行正常，但您也可以考虑使用然后而不是成功。为什么？见下文。

如何实施success（）如果我们查看Angular的源代码here，我们可以看到成功基本上是：

<!DOCTYPE html>
<html>

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

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

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

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

    $http({
      method: 'GET',
      url: 'http://d.biossusa.com/api/distributor?key=*****', 
      dataType: 'jsonp',
    }).then(function (successResponse) { 
      debugger 
      $scope.myData = JSON.stringify(successResponse.data);
            console.log("successResponse", successResponse.data);
        }, function (error) {
             $scope.myData = {};
             console.log('error',error)
        });

  });
  </script>
  </body>
</html>

所以它就像then（）但是解构了响应对象。这基本上只是语法糖，所以你有一个回调，它将JSON对象作为它的第一个参数返回，并保存你自己到达response.data。来自source。只是谷歌，你会得到更多。

Answer 4

我将你的例子复制并粘贴到一个plunkr中，它工作得很好（除了因为CORS而不能制作你的ajax）。

https://plnkr.co/edit/oEkv3vgkotjJhVFrSvu2?p=preview

您还需要从小提琴上的javascript窗口中删除<script>标记

我看了你的jsFiddle，注释掉了javascript，控制台仍然说有一个奇怪的喷油器错误。

Answer 5

根据您JSFiddle的一些观察结果：

将LOAD TYPE从onLoad更改为No wrap - in <head>。
无需将jQuery作为External Resources包含在小提琴中。
从小提琴的<script>部分删除脚本开始</script>并结束JAVASCRIPT标记。
当JSON执行http协议但JSFiddle执行https protocol.Hence时，如果代码已通过JSFiddle执行，则会出现以下错误。

混合内容：“https://jsfiddle.net/bheng/b3rgh92v/”页面是通过HTTPS加载的，但是请求了一个不安全的XMLHttpRequest端点“http://d.biossusa.com/api/distributor?key= *****”。此请求已被阻止;内容必须通过HTTPS提供。

更新了JSFiddle： https://jsfiddle.net/b3rgh92v/9/

Answer 6

我在小提琴上阅读你的代码并观察一些问题

1。 Angular模块未找到问题

在您的示例中，您在脚本中添加了<script>标记。您不需要在该操作中添加<script>标记，因为它已添加到<script>内。

此外，您的JavaScript代码运行onload事件，因此在角度引导时，模块不可用。因此，请在JavaScript部分右上方的JavaScript设置中将其更改为No wrap - in <body>。

2。从`http`服务器

向https服务器调用请求

错误：混合内容：＆＃39; https://jsfiddle.net/b3rgh92v/＆＃39;是通过HTTPS加载的，但是请求了一个不安全的XMLHttpRequest端点＆＃39; http://d.biossusa.com/api/distributor?key= *****＆＃39;。此请求已被阻止;内容必须通过HTTPS提供。

您可以从非https服务器调用https请求，但无法从https服务器调用非https服务器请求。您只需从https

在https服务器上申请

我已将url更改为https服务器上的另一个测试API。它工作正常。

您可以查看更新的代码 https://jsfiddle.net/b3rgh92v/11/

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

6 个答案:

1。 Angular模块未找到问题

2。从`http`服务器

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

6 个答案:

1。 Angular模块未找到问题

2。从http服务器

2。从`http`服务器