Question

我在使用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 调用服务，其中我想在表中显示值：< / p>

<%@ 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客户端并加载索引时，表中没有显示任何内容：

提前致谢...

Answer 1

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

我在网络服务中添加了 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>

Answer 2

在控制器功能中使用.then代替.success：

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

使用AngularJS使用RESTful Web服务

2 个答案: