javascript - 使用 AJAX 和 jQuery 从数据库中获取实时比分

Question

所以我有一个数据库，在获得比赛得分后会更新。

现在我可以向我的路线发出ajax get请求，以从$(document).ready(function()上的数据库获取最新分数，并更改我的html以显示分数，但它是静态的并且不会获取更新。 所以我的问题是如何在循环中发出这个ajax请求。现在用户必须刷新才能再次发出请求并获取更新的最新分数。

我在express框架上使用mongoose、mongodb、nodejs，并在脚本中使用jquery。

这是我处理ajax请求的nodejs路由，它返回匹配数据的json

router.get('/matchData',function(req,res){
    Match.getMatchData(function(err,match){
        if(err) throw err;
        res.send(match);
    });
});

这是我的 AJAX 脚本。

$(document).ready(function(){
    $.ajax({
    type: 'GET',
    url: 'http://localhost:3000/matchData',
    dataType: 'json'
    })
        .done(function(data) {
            $('.team1').text(data.title);
            $('.team1odds').text(data.values.t1odds);
            $('.team1probability').text(data.values.t1probability);
            $('.team1score').text(data.values.t1predict);
            $('.team2').text(data.title);
            $('.team2odds').text(data.values.t2odds);
            $('.team2probability').text(data.values.t2probability);
            $('.team2score').text(data.values.t2predict);
        })
        .fail(function() {
            alert("Ajax failed to fetch data")
        });
});

Answer 1

有多种方法可以做到这一点，最简单的方法是使用 long polling ，但也是最没有效果的。

非常简单的例子:

var seconds = 5;
setInterval(function runner() {
    // run your ajax call here
    var result = callAjax();
}, seconds * 1000);

更好的方法是使用 websockets，当分数在服务器端更新时，您可以将事件推送到客户端。