使用 RESTful Web 服务 AngularJS

Question

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

我创建了一个person.java class:

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() 函数时，它 returns 以下 JSON 对象：

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

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

现在，在客户端中我有 index.jsp，我在其中使用 angular.js 调用服务我想在 table:

中显示值

<%@ 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 客户端并加载索引时，table:

中没有显示任何内容

提前致谢...

Answer 1

在控制器函数中使用.then代替.success：

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

Answer 2

谢谢大家，我已经做了...

我向 Web 服务添加了 CORSFilter class：

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>

使用 RESTful Web 服务 AngularJS

Consuming a RESTful Web Service with AngularJS

java

rest

json

glassfish

angularjs