$ HTTP POST在Angular.js($http post in Angular.js)

2019-08-20 15:18发布

我刚开始学习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>

我是在正确的方向?

Answer 1:

在当前的功能,如果你要分配$scope.persons$http是一个承诺对象$http返回一个承诺对象。

因此,而不是分配scope.persons至$ HTTP应先分配$scope.persons的成功里面$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;
            });

}


Answer 2:

这里是由阿贾伊贝尼给出的溶液的变化。 使用该方法,然后允许链中的多个承诺,因为返回一个新的承诺。

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
        }
    );
}


Answer 3:

使用$ 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);
});

让我们打破这:链接有点明显,所以我们跳过这个...

  1. 数据:这是你的邮递员请求的主体内容

     { Description: 'Test Object', TestType: 'PostTest' } 
  2. 配置:这是我们可以注入头,事件处理,缓存......看到AngularJS:API:$ HTTP:向下滚动到配置头是HTTP最常见的邮递员变体的人斗争angularJS复制

     { headers { 'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==', 'Accept': 'application/json;odata=verbose' } } 
  3. 回应:$ HTTP动作返回一个角的承诺,我建议使用。那么(successFunction,误差函数)来处理,承诺见AngularJS:递延API(承诺)

     .then(function (result) { console.log('Success'); console.log(result); }, function(error) { console.log('Error:'); console.log(error); }); 


文章来源: $http post in Angular.js