如何用Java的JSONArray中的AngularJS填充html表?

时间:2016-12-01 18:18:30

标签: java html angularjs json servlets

我正在尝试使用JSONObject和JSONArray从我的java servlet(使用mysql服务器)向jtml页面发送一个json数组。数组成功发送到html页面,但表本身没有得到任何东西。

这是我总是在html页面的第一行得到的,而表本身并没有得到任何东西。

{"Info":[{"Name":"Jack","Lastname":"Nilson","Birthday":"1980-10-10","Address":"Nowhere","State": "ABC","ZIP":"999"}]}

Servlet (doPost)

conn = DriverManager.getConnection(url);
        PreparedStatement ps = conn.prepareStatement("select* from db");
        ResultSet rs = ps.executeQuery();
        JSONArray jarr = new JSONArray();
        while(rs.next()){
            JSONObject obj = new JSONObject();
            obj.put("Name", rs.getString(1));
            obj.put("Lastname", rs.getString(2));
            obj.put("Birthday", rs.getDate(3));
            obj.put("Address", rs.getString(4));
            obj.put("State", rs.getString(5));
            obj.put("ZIP", rs.getInt(6));
            jarr.put(obj);
        }
        JSONObject json1 = new JSONObject();
        json1.put("Info", jarr);

        response.getWriter().write(json1.toString());
        rs.close();

AngularJS:

<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.post("InfoServletPath")
    .then(function (response) {
       $scope.Info = response.data.Info;
    });
});
</script>

HTML:

    <body>
   <form action="InfoServletPath" method="POST">
        <div ng-app="myApp" ng-controller="customersCtrl"> 
                <table id="pInfo">
                    <thead>
                        <tr>
                            <th width="10%">Name</th>
                            <th width="10%">Lastname</th>
                            <th width="10%">Birthday</th>
                            <th width="10%">Address</th>
                            <th width="10%">STATE</th>
                            <th width="10%">Zip</th>
                        </tr>
                    </thead>
                    <tr ng-repeat="row in Info">
                        <td> {{ row.Name }} </td>
                        <td> {{ row.Lastname }} </td>
                        <td> {{ row.Birthday }} </td>
                        <td> {{ row.Address }} </td>
                        <td> {{ row.State }} </td>
                        <td> {{ row.ZIP }} </td>
                    </tr>
                </table>
                </div>
            </div>
    </form>
</body>

我已经有好几天这个问题了,说实话,我似乎无法找到问题的任何解决方案。我在互联网和stackoverflow中找到的唯一一件事是关于如何从json文件中填充AngularJS表。我可能有问题设置我的angularJS脚本代码但我真的不知道如何在这种情况下这样做。非常感谢您对此问题的任何帮助!

我不使用JSP的OBS。

1 个答案:

答案 0 :(得分:0)

根据您的上一条评论,在回复您的回复时似乎缺少content-type : application/json。角度设置看起来很好。没问题......

JSONObject json1 = new JSONObject();
json1.put("Info", jarr);

response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");

response.getWriter().write(json1.toString());
rs.close();