JavaScript Ajax 不按时更新变量

javascript ajax not updating variable on time

本文关键字：更新 变量 Ajax JavaScript      更新时间：2023-09-26

我相信这可能很容易，但我在这里搞砸了ajax调用。我对javascript很陌生，所以我真的不知道我做错了什么。 我试图在网上查找它，但无法在正确的时间让我的电话正常工作。 任何帮助真的非常感谢。

我

所做的只是将NHL球员数据从json获取到我使用angularjs创建的表中。 现在，当$scope.players未定义时，将显示该表，但是一旦ajax完成，它就有了数据。 我没有在正确的时间显示它，我的表总是空的

花名册控制器相关代码：

(function () {
    'use strict';
    angular.module("DevilsFanApp")
        .controller("RosterController", RosterController);
    function RosterController($rootScope, $scope, RosterService) {
        $scope.players = RosterService.players;
        $scope.addPlayer = addPlayer;
        $scope.updatePlayer = updatePlayer;
        $scope.deletePlayer = deletePlayer;
        $scope.selectPlayer = selectPlayer;
        $scope.fetchPlayers = fetchPlayers;
        function init() {
            fetchPlayers(function(res){
                $scope.players = RosterService.players;
                console.log("Goalies Now", $scope.players);
            });
        }
        init();
        function fetchPlayers(callback) {
            var players = RosterService.updatePlayers(function(res){
                callback(players);
            });
        }   
    }
})();

名册服务：

function RosterService($rootScope) {
    var model = {
        players: [],
        updatePlayers: updatePlayers,
        setCurrentPlayer: setCurrentPlayer,
        getCurrentPlayer: getCurrentPlayer,
        findPlayerByName: findPlayerByName,
        findAllPlayers: findAllPlayers,
        createPlayer: createPlayer,
        deletePlayerById: deletePlayerById,
        updatePlayer: updatePlayer,
        findPlayerById: findPlayerById
    };
    return model;
    function updatePlayers(callback){
        $.ajax({
            url: URL,
            dataType: 'json',
            type: 'GET',
        }).done(function(response) {
            var data = angular.fromJson(response);
            for (var g = 0; g < data.goalie.length; g++) {
                var player = model.findPlayerByName(data.goalie[g].name);
                if (player == null) {
                    var newPlayer = {
                        _id: (new Date).getTime(),
                        name: data.goalie[g].name,
                        position: data.goalie[g].position,
                        height: data.goalie[g].height,
                        weight: data.goalie[g].weight,
                        birthday: data.goalie[g].birthdate,
                        age: 25,
                        birthPlace: data.goalie[g].birthplace,
                        number: data.goalie[g].number
                    };
                    model.players.push(newPlayer);
                }
                else{
                    callback(null)
                }
            }
            return callback(model.players)
        });
    }

名册查看表代码：

<tr ng-repeat="player in players">
    <td>{{player.number}}</td>
    <td>{{player.name}}</td>
    <td>{{player.position}}</td>
    <td>{{player.height}}</td>
    <td>{{player.weight}}</td>
    <td>{{player.birthday}}</td>
    <td>{{player.age}}</td>
    <td>{{player.birthPlace}}</td>
    <td>
        <div class="col-sm-4 btn-group">
            <button ng-click="deletePlayer($index)" type="button" class="btn btn-table">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
            <button ng-click="selectPlayer($index)" type="button" class="btn btn-table">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
        </div>
    </td>
</tr>
他们试图

实现的方式似乎太像"JQuery 方式"，这与角度的工作方式非常不同。首先，避免回调，改用承诺。此外，如果它是一个选项，请改用 $http 或 restangular。

遵循我的建议的服务示例如下所示（该示例仅适用于 fetchPlayer 功能）：

angular.module('myModule', [])
.service('playersService', ['$http', function($http){
    this.fetchPlayers = function(){
        return $http.get(url);
    }
}])
.controller('playerCtrl', ['$scope', 'playersService', function($scope, playersService){
    $scope.players = []; //Start as an empty array
    this.fetchPlayers = function(){
        playersService.fetchPlayers.then(function(players){
            //here you can process the data as you need
            $scope.players = players; //assign to a property in scope so template can see it
        });
    };
    this.fetchPlayers(); //Invoke fetch on load
}])

在这里，您可以在项目中找到一个控制器，该控制器使用 $http 执行 CRUD 操作并处理响应以在表中显示它们，下面是执行对后端 API 调用的服务实现。

相关文章：