Question

我刚开始从这里学习AngularJS： http://lostechies.com/gabrielschenker/2014/02/26/angular-js-blog-series-table-of-content/

我目前在chapter 5，所以我还没有进入承诺，自定义指令等。本教程的REST Web服务部分是用C＃/ .NET编写的（其中我不知道，当我用Java编写自己的Web服务时，除了Java中的一些相似之处。

这是我的HTML：

<body ng-App="doctorApp">
    <div ng-controller="doctorCtrl">
        <table>
            <thead>
                <tr>
                    <th>Last Name</th>
                    <th>First Name</th>
                    <th>User Name</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="doctor in doctors" >
                    <td>{{doctor.lastName}}</td>
                    <td>{{doctor.firstName}}</td>
                    <td>{{doctor.user.userName}}</td>
                    <td>{{doctor.description}}</td>
            </tbody>
        </table>    
    </div>
    <div ng-controller="doctorCtrl">
        <h2>Add a Doctor</h2>
        <form class="myForm">
            <div>
                <label for="firstName">First Name</label>
                <input id="firstName" type="text" ng-model="firstName" /><br/>
            </div>
            <div>
                <label for="lastName">Last Name</label>
                <input id="lastName" type="text" ng-model="lastName" /><br/>
            </div>
            <div>
                <label for="description">Description</label>
                <input id="description" type="text" ng-model="description" /><br/>
            </div>
            <div>
                <label for="userName">User Name</label>
                <input id="userName" type="text" ng-model="userName" /><br/>
            </div>
            <div>
                <label for="password">Password</label>
                <input type="password" ng-model="password" /><br/>
            </div>
            <button ng-click="addDoctor()" type="submit">Submit</button>
        </form>
    </div>
    <script src='js/libs/angular.js/angular.js'></script>
    <script src='js/doctors.js'></script>
</body>

这是我的JavaScript：

var app = angular.module("doctorApp", []);

app.controller("doctorCtrl", function($scope, $http) {

    loadDoctors();

    $scope.refresh = function() {
        loadDoctors();
    };

    function loadDoctors() {
        $http.get('localhost/myrestapi')
               .success(function(data, status, headers, config) {
                    $scope.doctors = data;
                }).error(function(data, status, headers, config) {
                    // error
                });
    };

    $scope.addDoctor = function() {

        var currentDate = new Date();

        var data = {
            firstName: $scope.firstName,
            lastName: $scope.lastName,
            description: $scope.description,
            modifyDate: currentDate,
            user: {
                userName: $scope.userName,
                password: $scope.password,
                modifyDate: currentDate
            }
        };

        $http.post('localhost/myrestapi', data)
            .success(function(data, status, headers) {
                alert("Doctor added");
                // This is where I have my trouble, this section, copied from the tutorial 
                // is supposed to update/refresh my table list
                $http.get(headers("location"))
                    .success(function(data) {
                        $scope.doctors.push(data);
                    });
        });
    };

});

作者（Gabriel Schenker，顺便提一下你的教程）在Web服务端使用HttpContext.Current.Response.AddHeader（用C＃编写）加上JavaScript / AngularJS端的$ http.get来更新/刷新插入条目后的列表。

我可以很好地插入条目（它在MySQL中显示），警报就行了，但是新条目没有反映在列表上（在视图中，再次调用GET不是（AJAX）明智的，对吧？）。问题是，我不知道它的对应物或如何在Java / JAX-RS中实现它（因为我在JAX-RS中也不是那么深入）。所以我的问题是：

如何在Java中实现相当于C＃的HttpContext.Current.Response.AddHeader，它响应上面的代码部分（在注释下）？
即使没有在问题1中实现JAX-RS对应项，如何在AngularJS中执行此操作以便在插入后立即刷新我的列表？

我已经在网上搜索过了，包括stackoverflow，这里有很多类似的问题和解决方案，使用高级（现在对我来说）AngularJS概念（比如使用范围。$ apply（），$ compile，modelFactory with $保存，使用指令进行DOM操作等等，但是，我更喜欢按照教程结束，我也希望看到最适合这种情况的解决方案，并且仍然使用$ http.post。

非常感谢能够回答的人。

-Julius

Answer 1

我不确定1）

但是对于Angular部分

您使用ngRepeat指令将视图绑定到模型，因此您只需将新创建的医生添加到$scope.doctors。

假设您的网络服务在回复后返回新创建的医生

你可以做到

       $http.post('localhost/myrestapi', data)
        .success(function(data, status, headers) {
            alert("Doctor added");
            $scope.doctors.push(data);
    });

标题位置可以用于两个原因，请参阅Wikipedia

在两种情况下，HTTP服务器的响应中返回HTTP Location头字段：

1.要求网络浏览器加载不同的网页（URL重定向）。在这种情况下，应使用HTTP状态代码3xx发送Location标头。当请求的URI具有以下内容时，Web服务器将其作为响应的一部分传递：   暂时移动;   永久搬家;或

2.处理了一个请求，例如POSTed表单，并在不同的URI提供该请求的结果   提供有关新创建资源的位置的信息。在这种情况下，应使用HTTP状态代码201或202发送Location标头。1

因此，对于您的教程，我们处于第二种情况：Web服务告诉客户端在哪里可以找到新创建的资源，以便可以获取它（这必须由您的服务器实现，我无法帮助您）即由http GET requet。

刷新UI的另一种方法是再次获取调用loadDoctors()的医生列表，但这样做效率低，因为它会占用更多带宽

AngularJS和JAX-RS - 插入模型后更新表列表

1 个答案: