使用 AngularJS 使用 RESTful Web 服务答案

【问题标题】：Consuming a RESTful Web Service with AngularJS使用 AngularJS 使用 RESTful Web 服务
【发布时间】：2016-02-13 17:14:13
【问题描述】：

我在客户端使用 Angular 使用 Web 服务时遇到问题。

我创建了一个 person.java 类：

public class person {

    private String id;
    private String name;

    public person(String id, String name) {
        this.id = id;
        this.name = name;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

Rest 服务具有以下功能：

serviceTest.java

@Path("/service")
public class serviceTest{
    @GET
    @Path("/findall")
    @Produces(MediaType.APPLICATION_JSON)
    public List<Person> findAll(){
        List <Person> result = new ArrayList<>();
        result.add(new Person("1", "Jason");
        result.add(new Person("2", "Kimberly");
        return result;
        }
    }

当我调用findAll() 函数时，它返回以下 JSON 对象：

[
    {
        "id": "1",
        "name": "Jason"    
    },

    {
        "id": "2",
        "name": "Kimberly"  
    }
]

现在，在客户端我有 index.jsp 我用 angular.js 调用服务，我想在表格中显示值：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html ng-app="myapp">
<head>
    <title>$Title$</title>
    <script type="text/javascript" src="resources/javaScript/angular.min.js"></script>
</head>
<body ng-controller="personController">

<table cellpadding="2" cellspacing="2" border="1">
    <tr>
        <th>ID</th>
        <th>Name</th>
    </tr>
    <tr ng-repeat="pr in listPerson">
        <td>{{pr.id}}</td>
        <td>{{pr.name}}</td>
    </tr>
</table>

<script type="text/javascript">
    var myapp = angular.module('myapp', []);
    myapp.controller('personController', function ($scope, $http) {
        $http.get('http://localhost:8080/wsService/api/service/findall').success(function(data) {
            $scope.listPerson = data;
        });
    });

</script>    
</body>
</html>

当我执行 java 客户端并加载索引时，表中没有显示任何内容：

提前谢谢...

【问题讨论】：

他/她有
尝试在中添加您的
你可以试试 $scope.listPerson = data.data;也一样？
您的 ws 工作正常吗？检查浏览器..你得到正确的json？我可以看到一些语法错误..但那些可能是错字？
还有什么是你的角度版本？

标签： java angularjs json rest glassfish

【解决方案1】：

谢谢大家，我已经做到了……

我向 Web 服务添加了一个 CORSFilter 类：

public class CORSFilter implements Filter {

public CORSFilter() {
}

public void init(FilterConfig fConfig) throws ServletException {
}

public void destroy() {
}

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {

    ((HttpServletResponse) response).addHeader("Access-Control-Allow-Origin", "*");
    ((HttpServletResponse) response).addHeader("Access-Control-Allow-Credentials", "true");
    ((HttpServletResponse) response).addHeader("Access-Control-Allow-Methods", "GET,POST,PUT,PATCH,DELETE");
    ((HttpServletResponse) response).addHeader("Access-Control-Allow-Headers", "X-Requested-With");
    chain.doFilter(request, response);
}

}

在web.xml中：

<filter>
    <filter-name>CORSFilter</filter-name>
    <filter-class>CORSFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>CORSFilter</filter-name>
    <url-pattern>/api/*</url-pattern>
</filter-mapping>

【讨论】：

【解决方案2】：

在控制器函数中使用.then 而不是.success：

myapp.controller('personController', function ($scope, $http) {
        $http.get('http://localhost:8080/wsService/api/service/findall').then(function(data) {
            $scope.listPerson = data;
        });
    });

【讨论】：

它也不起作用。我还用其他示例测试了 angular.js，它工作正常......