Angular.js 中的 $http 帖子 [英] $http post in Angular.js

问题描述

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

var postData = " "+ "<事件>GetPersons"+ "</RequestInfo>";var req = new XMLHttpRequest();req.onreadystatechange = 函数 () {如果(req.readyState == 4 || req.readyState ==完成"){如果(req.status == 200){console.log(req.responseText);}}};尝试 {req.open('POST', 'http://samedomain.com/GetPersons', false);req.send(postData);}抓住 (e) {控制台日志(e)；}

这是我目前所拥有的 -

function TestController($scope) {$scope.persons = $http({url: 'http://samedomain.com/GetPersons',方法:POST"，数据:postData，标头:{'Content-Type':'application/x-www-form-urlencoded'}}).成功(功能(数据，状态，标题，配置){$scope.data = 数据；//如何将其传递给 $scope.persons?}).error(function (data, status, headers, config) {$scope.status = 状态；});}

html

<li ng-repeat="person in people">{{person.name}}</li>

我的方向是否正确?

解决方案

在您当前的函数中，如果您将 $scope.persons 分配给 $http 这是一个承诺object as $http 返回一个 promise 对象.

因此，不要将 scope.persons 分配给 $http，您应该在 $http 的成功中分配 $scope.persons ，如下所述:

function TestController($scope, $http) {$http({url: 'http://samedomain.com/GetPersons',方法:POST"，数据:postData，标头:{'Content-Type':'application/x-www-form-urlencoded'}}).成功(功能(数据，状态，标题，配置){$scope.persons = 数据；//在这里分配 $scope.persons 因为这里解决了 promise}).error(function (data, status, headers, config) {$scope.status = 状态；});}

I've just started learning Angular.js. How do I re-write the following code in 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);
    }

Here's what I have so far -

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>

Am I in the right direction?

解决方案

In your current function if you are assigning $scope.persons to $http which is a promise object as $http returns a promise object.

So instead of assigning scope.persons to $http you should assign $scope.persons inside the success of $http as mentioned below:

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

}

这篇关于Angular.js 中的 $http 帖子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！