Question

我实现了一个后端，根据Spring启动向前端提供数据。它工作正常。当我使用chrome浏览localhost时，它可以工作网址：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代码：

＆＃13;

<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>

＆＃13;

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

Answer 1

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

data - {string | Object} - 使用转换函数转换的响应体。 status - {number} - 响应的HTTP状态代码。 headers - {function（[headerName]）} - 头部getter函数。 config - {Object} - 用于生成请求的配置对象。 statusText - {string} - 响应的HTTP状态文本。

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

Answer 2

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

$ http遗留承诺方法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)，那可能会更好。

AngularJS https获得响应，但没有显示

2 个答案: