angularjs中的$http不起作用_Angularjs

angularjs中的$http不起作用

angularjs

angularjs中的$http不起作用,angularjs,Angularjs,我有一段angularjs代码。如果我硬编码http response的值，当我在angularjs中使用http方法时，它显示的是响应，但它没有显示。但我在当地得到了这种联系的回应。我不知道我错在哪里。这是密码 <!DOCTYPE html> <html> <head> <script script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.j

我有一段angularjs代码。如果我硬编码http response的值，当我在angularjs中使用http方法时，它显示的是响应，但它没有显示。但我在当地得到了这种联系的回应。我不知道我错在哪里。这是密码

<!DOCTYPE html>
<html>
  <head>
    <script script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>
      angular.module('myApp', [])
      .controller('MyCtrl', function($scope,$http){

        $scope.test = [
  {
    "done": 2,
    "total": 7
  }
];
});
    </script>
  </head>
  <body ng-app="myApp" ng-controller="MyCtrl">
    <div ng-repeat="t in test">
      <span>{{t.done}}</span>
      <span>{{t.total}}</span>
    </div>
  </body>
</html>


angular.module（'myApp'，[]）
.controller（'MyCtrl'，函数（$scope，$http）{
$scope.test=[
{
“完成”：2，
“总数”：7
}
];
});
{{t.done}}
{{t.total}}

再次在脚本中，如果我添加以下代码，它不会显示值

<script>
      angular.module('myApp', [])
      .controller('MyCtrl', function($scope,$http){

         $http.get("http://localhost:8080/reports/webapi/hello/myresource2").then(function (response) {

      $scope.test  = response;
  });
});
    </script>


angular.module（'myApp'，[]）
.controller（'MyCtrl'，函数（$scope，$http）{
$http.get（“http://localhost:8080/reports/webapi/hello/myresource2）然后（函数（响应）{
$scope.test=响应；
});
});

您的实际

数据

驻留在

响应中。数据

。因此，相应地更新范围变量

你的控制器代码

angular.module('myApp', [])
  .controller('MyCtrl', function($scope, $http) {
      $http.get("http://localhost:8080/reports/webapi/hello/myresource2")
      .then(function (response) {
          $scope.test = response.data;
      });
});

希望这能解决问题。

尝试添加另一个捕获错误响应的函数

$http.get("http://localhost:8080/reports/webapi/hello/myresource2").then(function (response) {
        $scope.test  = response;
    }, function(response){
       console.log(response)
    });

我还讨论了类似的问题，并通过在接收端的响应中添加以下HTTP头来解决

Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin:

您可能不希望在结尾使用*，而只希望使用发送数据的主机的域名。比如*.example.com

但这只有在您可以访问服务器的配置时才可行

您需要在服务器中添加这些头，而不是在AngularJS中因为您是通过api发送json数据的，所以必须这样做

<script>
  angular.module('myApp', [])
  .controller('MyCtrl', function($scope,$http){

     $http.get("http://localhost:8080/reports/webapi/hello/myresource2").then(function (response) {

  $scope.test  = response.data;
}); 
 });
</script>


angular.module（'myApp'，[]）
.controller（'MyCtrl'，函数（$scope，$http）{
$http.get（“http://localhost:8080/reports/webapi/hello/myresource2）然后（函数（响应）{
$scope.test=response.data；
}); 
});

如果您正在运行google chrome并运行您的应用程序，请尝试禁用google chrome的web安全功能，它将正常工作

您的问题不在于

$http

，而在于CORS。我在学习angularJS时遇到过这个问题

由于AngularJS或新框架广泛使用

AJAX

，因此存在一个称为CORS（跨源资源共享）的小问题，这意味着出于安全考虑，我们可以从同一域访问资源

请参阅

Web应用程序由服务器提供服务，但您试图在浏览器中直接打开html，这意味着您试图从

文件

协议访问

http

资源，这是

CORS

不允许的

你有两个选择

在静态服务器中运行应用程序

你的代码很混乱。您正在对

测试变量执行ng repeat。在您的MyCtrl
中，没有这样的变量？对不起，我弄错了…它的$scope.test only请检查控制台.log（响应）？此链接正在发送哪种类型的响应。@Teja请使用jsfiddle，jsbin。。。要模拟场景，可以添加console.log（response.data）
并发布输出？angular.module（'myApp'，[]）.controller（'MyCtrl'，function（$scope，$http）{$http.get（“）。然后（function（response）{$scope.test=response.data；console.log（JSON.stringify（$scope.test））；}）；………它没有控制台输出？您是以web应用程序的形式运行应用程序，还是只需在浏览器中打开index.html？首先，您应该禁用google chrome的web安全性，并运行abc.htm，因为您正试图从文件协议访问http协议。非常感谢……它工作了……刚刚实现了第二个选项除此之外，它应该是响应。数据
而不仅仅是响应