AngularJS - 没有从 xmlhttprequest 填充表答案

【问题标题】：AngularJS - Table not getting populated from xmlhttprequestAngularJS - 没有从 xmlhttprequest 填充表
【发布时间】：2019-01-16 00:39:34
【问题描述】：

大家好，我是 Angular js 的新手，我编写了以下页面，假设显示来自“http://localhost:8080/SpringRestHibernateWebTest/employee/listEmployee”作为 json 对象的员工详细信息表。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SPRING REST HIBERNATE WEB TEST</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>


<script type="text/javascript">

var app = angular
.module("myModule",[])
.controller("myController", function($scope){

    var EmployeeJSON = null;


    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "http://localhost:8080/SpringRestHibernateWebTest/employee/listEmployee", true);
    xhttp.setRequestHeader("Content-Type", "application/json");
    xhttp.send();

    xhttp.onreadystatechange = function() {
    if(xhttp.readyState == 4 && xhttp.status == 200) {
        var response = JSON.stringify(xhttp.responseText);
        //alert(JSON.parse(response));
        EmployeeJSON = JSON.parse(response);

        var employees = EmployeeJSON;

        $scope.employees = employees;
        $scope.IsVisible = true;

        alert('employees '+employees);
        alert('$scope.employees '+$scope.employees);
        alert('EmployeeJSON '+EmployeeJSON);

    }
}



});

<body ng-app="myModule">
<h1>SPRING REST HIBERNATE WEB TEST</h1>

<a href="/SpringRestHibernateWebTest/employee/listEmployee">CLICK FOR EMPLOYEE LIST</a>

<form>

<table>
<tr> <td>EMPLOYEE ID</td> <td><input type="text" id="emp_id"></td> </tr>
<tr> <td>EMPLOYEE NAME</td> <td><input type="text" id="emp_name"></td> </tr>
<tr> <td>EMPLOYEE SALARY</td> <td><input type="text" id="emp_salary"></td> </tr>
<tr> <td>EMPLOYEE ADDRESS</td> <td><input type="text" id="emp_address"></td> </tr>
</table>

</form>


<div ng-controller="myController">






<table>

<thead>

<tr> <td>EMPLOYEE ID</td> <td>EMPLOYEE NAME</td> <td>EMPLOYEE SALARY</td><td>EMPLOYEE ADDRESS</td></tr>

</thead>

<tbody>

<tr ng-repeat="employee in employees">

 <td>{{employee.employeeId}}</td>
 <td>{{employee.employeeName}}</td>
 <td>{{employee.employeeSalary}}</td>
 <td>{{employee.employeeAddress}}</td>

</tr>

</tbody>


</table>


</div>

</body>
</html>

根据编码，当页面加载时，来自角度控制器的警报正在被填充并显示 json 对象，但表格没有被填充。

任何建议将不胜感激！

【问题讨论】：

标签： angularjs jsp xmlhttprequest angularjs-http

【解决方案1】：

你使用XMLHttpRequest，它位于 Angular 之外。

所以你必须使用 $scope.$apply(); 手动触发 Angular 的摘要循环。

// ...
$scope.employees = employees;
$scope.IsVisible = true;
$scope.$apply();
// ...

但是，对 API 执行 http 请求的更好方法是使用 $http 服务。

首先，你必须在Controller定义中注入$http服务：

.controller("myController", function($scope, $http) {

然后，你可以有类似的东西：

var endpoint = "http://localhost:8080/SpringRestHibernateWebTest/employee/listEmployee";

return $http.get(endpoint)
    .then(function(response) {
        // Use data as per your needs
        // response.data
    })
    .catch(function(response) {
        // Error occured
    })
    .finally(function() {
        // Always do something
    });

这样就不用手动调用$scope.$apply();了。

您可以在w3schools、Angular documentation 或网络上的许多地方找到$http 服务的更多信息。

【讨论】：