AngularJS https 得到响应但没有显示答案

【问题标题】：AngularJS https get response but, didn't displayAngularJS https 得到响应但没有显示
【发布时间】：2017-02-21 02:09:37
【问题描述】：

我实现了一个后端，基于 Spring boot 向前端提供数据。它工作正常。当我使用 chrome 浏览本地主机时，它可以工作网址：http://localhost:4983/employee/ALL/

回复：

'[{"id":1,"name":"ALFRED","dept":"871m","email":"woodspring.toronto@gmail.com","salary":120000},
{"id":2,"name":"FRANK","dept":"TCTO","email":"tzuchi.toronto@gmail.com","salary":920000},
{"id":3,"name":"NANCY","dept":"TDSB","email":"nancy.tseng@gmail.com","salary":620000},
{"id":4,"name":"TONG","dept":"NYGH","email":"tony.tang@gmail.com","salary":720000},
{"id":5,"name":"CINDY","dept":"University Of Victoria","email":"cindy.huang@uvic.edu","salary":9987654},
{"id":6,"name":"CINDY HUANG","dept":"University Of Victoria","email":"cindy.huang@uvic.edu","salary":9987654}]'

但是，当我使用 HTML 和 Angular JS 来 $http 时，数据并没有按预期显示。

这是我的 Angular JS 代码：

<html>
<head>
    <title>Angular JS Includes</title>
    <style>
        table, th, td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
        }
        table tr:nth-child(odd) {
            background-color: #f2f2f2;
        }
        table tr:nth-child(even) {
            background-color: #ffffff;
        }
</style>
</head>
<body>
    <script>
        function employeeController($scope, $http) {
           $http({method: 'GET',  url: 'http://localhost:4983/employee/ALL/'} )
		.success(function (response) {
       		$scope.employees =  response;
console.log( $scope.employees);
$scope.context = "IT works";
		});
        }
    </script>

    <h2>AngularJS Employee Application</h2>
    <div ng-app=""  ng-controller="employeeController">
{{  context  }}
{{ employees[0].id }} 
        <table>
            <tr>
                <th>Employee ID</th>
                <th>Employee Name</th>
                <th>Employee Dept</th>
                <th>employee Email</th>
		<th>employee Salary</th>
		<th>{{ msg  }}</th>
            </tr>
            <tr ng-repeat="empl in employees">
                <td>{{  empl.id  }}</td>
                <td>{{  empl.name }}</td>
             <td>{{  empl.dept  }}</td>
                <td>{{  empl.email }}</td>
             <td>{{  empl.salary  }}</td>
		<td>{{  msg  }}</td>
            </tr>
        </table>
    </div>
{{ msg }}

<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js'></script>
</body>
</html>

当我在 Chrome 上浏览此页面时，我可以看到后端 spring-boot 已被调用并响应数据。但是，前端不显示它。谁能看到我做错了什么？

【问题讨论】：

你在哪里定义了模块？？
您检查浏览器控制台是否有任何错误？还是日志的值？

标签： html angularjs json

【解决方案1】：

来自https://docs.angularjs.org/api/ng/service/$http 响应对象具有以下属性：

data – {string|Object} – 使用转换函数转换的响应正文。 status – {number} – 响应的 HTTP 状态代码。 headers – {function([headerName])} – 标头获取函数。 config – {Object} – 用于生成请求的配置对象。 statusText – {string} – 响应的 HTTP 状态文本。

在这种情况下使用：$scope.employees = response.data;

【讨论】：

【解决方案2】：

对于初学者，参考 $http 服务文档：

$http 旧式 promise 方法 success 和 error 已被弃用。请改用标准的then 方法。

尝试将您的代码更改为

function employeeController($scope, $http) {
  $http({
    method: 'GET',  
    url: 'http://localhost:4983/employee/ALL/'
  }).then(function (response) {
      $scope.employees =  response;
      console.log($scope.employees); //check what this outputs
      $scope.context = "IT works";
    });
}

您肯定也意识到，在这里给我们 localhost URL 不会有任何用处。

此外，代码可能有很多问题，如果您可以检查浏览器控制台是否有任何错误，或者至少检查控制台是否有 console.log($scope.employees) 的输出，那就更好了。

【讨论】：