angularjs - Angular.js 中的 $http 帖子

Question

我刚刚开始学习 Angular.js。如何在 Angular.js 中重写以下代码？

var postData = "<RequestInfo> "
            + "<Event>GetPersons</Event> "         
        + "</RequestInfo>";

    var req = new XMLHttpRequest();

    req.onreadystatechange = function () {
        if (req.readyState == 4 || req.readyState == "complete") {
            if (req.status == 200) {
                console.log(req.responseText);
            }
        }
    };

    try {
        req.open('POST', 'http://samedomain.com/GetPersons', false);
        req.send(postData);
    }
    catch (e) {
        console.log(e);
    }

这是我到目前为止所拥有的 -

function TestController($scope) {
      $scope.persons = $http({
            url: 'http://samedomain.com/GetPersons',
            method: "POST",
            data: postData,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).success(function (data, status, headers, config) {
                $scope.data = data; // how do pass this to $scope.persons?
            }).error(function (data, status, headers, config) {
                $scope.status = status;
            });

}

html

<div ng-controller="TestController">    
    <li ng-repeat="person in persons">{{person.name}}</li>
</div>

我在正确的方向吗？

score 41 · Accepted Answer

在您当前的函数中，如果您分配$scope.persons哪个$http是一个承诺对象，则$http返回一个承诺对象。

scope.persons因此，您应该在如下$scope.persons所述的成功内分配，而不是分配给 $http $http：

function TestController($scope, $http) {
      $http({
            url: 'http://samedomain.com/GetPersons',
            method: "POST",
            data: postData,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).success(function (data, status, headers, config) {
                $scope.persons = data; // assign  $scope.persons here as promise is resolved here 
            }).error(function (data, status, headers, config) {
                $scope.status = status;
            });

}

score 13 · Accepted Answer

这是Ajay beni给出的解决方案的变体。使用then方法允许链接多个 Promise，因为then返回一个新的 Promise。

function TestController($scope) {
    $http({
        url: 'http://samedomain.com/GetPersons',
        method: "POST",
        data: postData,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    })
    .then(function(response) {
            // success
        }, 
        function(response) { // optional
            // failed
        }
    );
}

score 0 · Accepted Answer

使用 $http：

AngularJS：API：$http

$http.post(url, data, [config]);

实现示例：

$http.post('http://service.provider.com/api/endpoint', {
        Description: 'Test Object',
        TestType: 'PostTest'
    }, {
        headers {
            'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
            'Accept': 'application/json;odata=verbose'
        }
    }
).then(function (result) {
    console.log('Success');
    console.log(result);
}, function(error) {
    console.log('Error:');
    console.log(error);
});

让我们分解一下：Url 有点明显，所以我们跳过它......

数据：这是您的邮递员请求的正文内容

{
    Description: 'Test Object',
    TestType: 'PostTest'
}

config：这是我们可以注入标头、事件处理程序、缓存的地方...参见AngularJS：API：$http：向下滚动到配置标头是人们在 angularJS 中难以复制的最常见的 http 邮递员变体
```
{
    headers {
        'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
        'Accept': 'application/json;odata=verbose'
    }
}
```
响应：$http 操作返回一个角度承诺，我建议使用 .then(successFunction, errorFunction) 来处理该承诺，请参阅AngularJS: The Deferred API (Promises)
```
.then(function (result) {
    console.log('Success');
    console.log(result);
}, function(error) {
    console.log('Error:');
    console.log(error);
});
```

angularjs - Angular.js 中的 $http 帖子

3 回答 3

Related

Reference