Question

我正在使用gamesdb.com的API来获取每个平台上的所有游戏平台和所有游戏。目前，我从一个空白页开始，在document.ready上，我对服务器进行AJAX调用以获取所有平台。然后我必须为每个平台做另一个AJAX调用以获得该平台上的游戏数量（例如，PC有2342个游戏，XBOX有453个游戏......）。我这样做的原因是为用户提供进度条（0-100％）并显示平台总游戏中的游戏数量： /

所以在这些API调用之后，我应该有一个列表，列出所有可以点击的平台，以启动另一个服务器端调用，为每个游戏进行api调用，以获取它的数据。单击某个平台时，客户端每次都会发送一个新的调用，以便服务器将游戏数据放入数据库中。然后我们做了gamecounter ++。

我尝试过对服务器的AJAX调用：

$.getJSON($('#platformlist').data('url-getplatforms'), function (data) {
    self.platforms = $.map(data, function(p) { return new Platform(p); });
    console.log(self.platforms);
    $.each(self.platforms, function () {
        console.log(this);
        $.getJSON($('#platformlist').data('url-getplatformgames'), { platformId: this.id }, function (platformgamesdata) {
            this.countGamesDone = 0;
            $.each(platformgamesdata, function() {
                this.games.push(new PlatformGame(this));
                this.countGames++;
            });

        });
    });
});

但由于这是异步的，因此无法显示进度，只是让浏览器加载，直到所有游戏都在数据库中而没有任何反馈。我可以把AJAX放在异步上：false，但是我已经读过有其他方法可以做到这一点，但没有人说怎么做。

这样做的其他选择是什么？我对使用什么技术没有限制。这是一个ASP.NET MVC 5应用程序。我可以使用javascript，c＃，signalr，jquery和任何其他javascript库，如果这可以简化这一点。

Answer 1

为什么无法显示浮动的loading消息？

$('#bigFatLoadingMessage').show();

$.getJSON($('#platformlist').data('url-getplatforms'), function (data) {
    self.platforms = $.map(data, function(p) { return new Platform(p); });
    $.each(self.platforms, function () {

        //update overlay message
        $('#bigFatLoadingMessage').html('Loading platform ' + this.name);

        $.getJSON($('#platformlist').data('url-getplatformgames'), { platformId: this.id }, function (platformgamesdata) {
            this.countGamesDone = 0;
            $.each(platformgamesdata, function() {
                this.games.push(new PlatformGame(this));
                this.countGames++;
            });

        });
    });

    $('#bigFatLoadingMessage').hide();
});

使用同步请求客户端 - >服务器的技术

1 个答案: