异步发布请求并分配返回的数据答案

【问题标题】：Async post request and assigning returned data异步发布请求并分配返回的数据
【发布时间】：2017-12-07 22:00:34
【问题描述】：

所以我正在学习 AngularJS，我正在尝试替换我从 web 服务获取数据并实时将其分配给使用 ng-repeat 绑定的变量的不太漂亮的方法。我最想实现的就是进行异步调用。我现在不能使用它，因为 AJAX 在数据返回到范围变量后返回数据。

我当前的代码如下所示：

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

    app.controller(
        "ListtController",
    function ($scope) {
        $scope.results = {
            response: [{
                name: '',
                surname: '',
                age: ''
            }]
        };
        $scope.searchListt = function () {
            loadingAnimationStart();
            $scope.results = getListt();
            loadingAnimationStop();
        };

        function getListt() {
            var returnData;
            $.ajax({
                url: 'listt',
                type: "POST",
                async: false,
                data: {
                    age_from: $('[name="age-start"]').val(),
                    age_to: $('[name="age-end"]').val()
                },
                success: function (data) {                
                    returnData = JSON.parse(data);
                }
            });
            return returnData;
        }
    }
);

在 HTML 中，我使用 ng-click 表示搜索功能

<button ng-click="searchListt()">Search</button>

【问题讨论】：

您在getListt() 函数中所做的全部工作理想情况下应该归于角度上称为“服务”的东西。也可以使用 $http angular 的内置服务来代替 ajax 调用。

标签： jquery html angularjs ajax

【解决方案1】：

如果你使用angularJs，那么你应该使用$http.post

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

        app.controller(
            "ListtController",
        function ($scope) {
            $scope.results = {
                response: [{
                    name: '',
                    surname: '',
                    age: ''
                }]
            };
            $scope.searchListt = function () {
                loadingAnimationStart();
                $scope.results = getListt();
                loadingAnimationStop();
            };

            function getListt() {
                $scope.returnData;
                $http.post(url, data, config).then(function (response) {
                 $scope.returnData = JSON.parse(response)
                },function (response) {
                alert("ERROR")
                });
            }
        }
    );

【讨论】：

【解决方案2】：

我在这里更新了你的代码。来自searchListt 函数的getListt(); 函数调用。一旦ajax调用成功然后响应数据分配给$scope.results

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

    app.controller(
        "ListtController",
    function ($scope) {
        $scope.results = {
            response: [{
                name: '',
                surname: '',
                age: ''
            }]
        };
        $scope.searchListt = function () {
            loadingAnimationStart();
            getListt();

        };

        function getListt() {
            $.ajax({
                url: 'listt',
                type: "POST",
                async: false,
                data: {
                    age_from: $('[name="age-start"]').val(),
                    age_to: $('[name="age-end"]').val()
                },
                success: function (data) {                
                    $scope.results = JSON.parse(data);
                    loadingAnimationStop();
                }
            });
        }
    }
);

【讨论】：

谢谢你，这项工作很棒，但我仍然需要异步请求
@plxhelpme_kindofuser 它仍然是异步请求，一旦服务请求完成（当服务器响应在 ajax 调用中的成功函数中执行时执行）

【解决方案3】：

为什么你可以直接调用 searchlist 函数并获取变量。我认为它会起作用。

$scope.results=[];

$scope.searchListt = function () {

           loadingAnimationStart();
           $.ajax({
                url: 'listt',
                type: "POST",
                async: false,
                data: {
                    age_from: $('[name="age-start"]').val(),
                    age_to: $('[name="age-end"]').val()
                },
                success: function (data) {                
                     $scope.results = JSON.parse(data);
                     loadingAnimationStop();
                }


            });
           loadingAnimationStop();
        }

【讨论】：