AngularJS https獲取響應但未顯示

我實現了一個後端，以便基於Spring引導向前端提供數據。它工作正常。當我使用Chrome瀏覽本地主機，它的工作原理網址：http://localhost:4983/employee/ALL/AngularJS https獲取響應但未顯示

響應：

'[{"id":1,"name":"ALFRED","dept":"871m","email":"[email protected]","salary":120000}, 
{"id":2,"name":"FRANK","dept":"TCTO","email":"[email protected]","salary":920000}, 
{"id":3,"name":"NANCY","dept":"TDSB","email":"[email protected]","salary":620000}, 
{"id":4,"name":"TONG","dept":"NYGH","email":"[email protected]","salary":720000}, 
{"id":5,"name":"CINDY","dept":"University Of Victoria","email":"[email protected]","salary":9987654}, 
{"id":6,"name":"CINDY HUANG","dept":"University Of Victoria","email":"[email protected]","salary":9987654}]'

但是，當我使用HTML和JS角至$ HTTP，數據並沒有表現出預期。

這裏是我的角度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/'}) 
 
\t \t .success(function (response) { 
 
     \t \t $scope.employees = response; 
 
console.log($scope.employees); 
 
$scope.context = "IT works"; 
 
\t \t }); 
 
     } 
 
    </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> 
 
\t \t <th>employee Salary</th> 
 
\t \t <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> 
 
\t \t <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這個頁面，我可以看到後臺彈簧開機一直叫，並用數據來響應。但是，前端不顯示它。任何人都可以看到我做錯了什麼？

來源

2017-02-21 woodspring

你在哪裏定義模塊？ –

您是否檢查瀏覽器控制檯是否有任何錯誤？或日誌的值？ –

從https://docs.angularjs.org/api/ng/service/$http 響應對象具有以下屬性：

數據 - {串|對象} - 與所述變換函數變換的響應體。 status - {number} - 響應的HTTP狀態碼。標題 - {函數（[headerName]）} - 標題getter函數。 config - {Object} - 用於生成請求的配置對象。 statusText - {string} - 響應的HTTP狀態文本。

在這種情況下使用：$ scope.employees = response.data;

來源

2017-02-21 02:26:50 vladwoguer

對於初學者來說，指的是$ 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"; 
    }); 
}

而且肯定你認識，給我們的本地主機URL是不會有任何用處的這裏。

此外，代碼可能有很多錯誤，如果您可以檢查瀏覽器控制檯是否有任何錯誤或至少檢查控制檯的輸出console.log($scope.employees)可能會好得多。

來源

2017-02-21 03:00:27

AngularJS https獲取響應但未顯示

回答

相關問題