AngularJS 和 Java Servlet 不起作用答案

【问题标题】：AngularJS and Java Servlet does not workAngularJS 和 Java Servlet 不起作用
【发布时间】：2016-09-09 09:51:54
【问题描述】：

我找到了一段代码来使用 AngularJS 和 Java Servlet。

问题是，当我运行应用程序时，它告诉我它不存在“AtpPlayers”页面，当然，它并没有填满我的表格。

我在 JBOSS 服务器和 json-simple-1.1.1.jar 库中尝试。

做错了什么？

servlet 在这里：

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/AtpPlayers")
public class AtpPlayers extends HttpServlet {
    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      response.setContentType("application/json;charset=UTF-8");
        try {
            PrintWriter out = response.getWriter();
            out.println("[{\"name\": \"Nadal, Rafael (ESP)\", \"email\": \"nadalrafael@gmail.com\", \"rank\": \"1\"},"
                + "{\"name\": \"Djokovic, Novak (SRB)\", \"email\": \"djokovicnovak@gmail.com\", \"rank\": \"2\"},"
                + "{\"name\": \"Federer, Roger (SUI)\", \"email\": \"federerroger@gmail.com\", \"rank\": \"3\"},"
                + "{\"name\": \"Wawrinka, Stan (SUI)\", \"email\": \"wawrinkastan@gmail.com\", \"rank\": \"4\"},"
                + "{\"name\": \"Ferrer, David (ESP)\", \"email\": \"ferrerdavid@gmail.com\", \"rank\": \"5\"}]");
    } catch (Exception e) {
        System.out.println(e);
    }
  }
}

HTML & JS 代码如下：

<!DOCTYPE html>
<html>
    <head>    
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">      
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>      
    </head>
    <body ng-app="ATP_PLAYERS">  
        <div ng-controller="atpController">
            <h5>Loading ATP players from a Servlet</h5>
            <table>
                <thead>
                    <tr>
                        <th>Rank</th>
                        <th>Name</th>
                        <th>E-mail</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in atp">
                        <td>{{item.rank}}</td>            
                        <td>{{item.name}}</td>
                        <td>{{item.email}}</td>
                    </tr>
                </tbody>
            </table>
        </div>    

        <script language="javascript" type="text/javascript">
          angular.module('ATP_PLAYERS', [])
           .controller('atpController', function ($scope, $http) {
              $http.get('http://localhost:8080/AngularGET/AtpPlayers').then(function (data, status, headers, config) {
                $scope.atp = data;
                alert('OK');
             }, function (data, status, headers, config) {
                alert('NU');
               });
         });
        </script>
    </body>
</html>

【问题讨论】：

到达服务器了吗？当您在浏览器中点击 url 时会得到什么？
现在，FireBug 告诉我“200 OK”和错误错误：JSON 数据 oc@ajax.googleapis.com/ajax/libs/angularjs/1.3.8/… 第 1 行第 3 列的“JSON.parse: expected property name or '}' ....”
响应是：[{'name': 'Nadal, Rafael (ESP)', 'email': 'nadalrafael@gmail.com', 'rank': '1'}, {'name': 'Djokovic, Novak (SRB)', 'email': 'djokovicnovak@gmail.com', 'rank': '2'},{'name': 'Federer, Roger (SUI)', ' email': 'federerroger @gmail.com', 'rank': '3'},{'name': 'Wawrinka, Stan (SUI)', 'email': 'wawrinkastan@gmail.com', 'rank' : '4'},{'name': 'Ferrer, David (ESP)', 'email': 'ferrerdavid@gmail.com', 'rank': '5'}]
JSon 应该有双引号 ( " ) 而不是单引号 ( ' )
是的，但是我用双引号从 Servlet 发送，而我在客户端用单引号接收...

标签： java angularjs servlets server

【解决方案1】：

我发现了问题：

$http.get('http://localhost:8080/AngularGET/AtpPlayers').then(function (data, status, headers, config) {
    $scope.atp = data;
    alert('OK');
}, function (data, status, headers, config) {
    alert('NU');
});

替换为：

$http.get('http://localhost:8080/AngularGET/AtpPlayers').then(function (response) {
    $scope.atp = response.data;
    alert('OK');
}, function (response) {
    alert('NU');
});

我不知道为什么编写原始代码的那个人会输入“函数（数据、状态、标题、配置）”...

【讨论】：