jquery GET ajax 调用多个页面

Question

我正在使用 jQuery 的 $.get() 方法从外部 php 文件中检索数据。

代码会刷新数据，但是，因为我正在刷新两个外部文件，所以第二个 (messages.php) 的 html 将刷新，然后在第一个文件后约 300 毫秒再次刷新(tasks.php)刷新。

除了将 tasks.php 和 messages.php 合二为一（在这种情况下，我非常不希望这样做），我该如何进行一次调用来刷新两者？

换句话说，你会如何重写这个函数？

如有任何建议，我们将不胜感激！

    function refreshTopBar() {
        var rootx = $('#admin_topbar_root').val();
        var root = (rootx.match(/\//g) || []).length;
        var userid = $('#admin_topbar_userid').val();

        $.get(rootx + "qms/inc/tasks.php", {r:root, u:userid}, function(data) {
                $('#mytasks').html(data);
            setTimeout(refreshTopBar, 9000);            
        });

        $.get(rootx + "qms/inc/messages.php", {u:userid}, function(data) {
                $('#messages_li').html(data);
            setTimeout(refreshTopBar, 9000);            
        });
    }

    refreshTopBar();

Answer 1

您可以使用一种承诺，在两个调用都完成后调用刷新函数。我已经在下面更改了您的代码：

function refreshTopBar() {
    var rootx = $('#admin_topbar_root').val();
    var root = (rootx.match(/\//g) || []).length;
    var userid = $('#admin_topbar_userid').val();

    $.get(rootx + "qms/inc/tasks.php", {r:root, u:userid}, function(data) {
            $('#mytasks').html(data);
        done();            
    });

    $.get(rootx + "qms/inc/messages.php", {u:userid}, function(data) {
            $('#messages_li').html(data);
        done();            
    });

    var done_int = 0;
    function done() {
        done_int++;
        if (done_int > 1) {
            setTimeout(refreshTopBar, 9000);
        }
    }
}

refreshTopBar();

这将等到 done() 函数在开始超时前至少被调用两次。

Answer 2

您可以使用$.when()传递ajax个请求，等待两个都完成后执行一个函数。

 function refreshTopBar() {
     var rootx = $('#admin_topbar_root').val();
     var root = (rootx.match(/\//g) || []).length;
     var userid = $('#admin_topbar_userid').val();

     var tasks = $.get(rootx + "qms/inc/tasks.php", { r: root,u: userid });
     var msgs = $.get(rootx + "qms/inc/messages.php", { u: userid });

     $.when(tasks, msgs).done(function (tasks_data, msgs_data) { 
         // return value is an array ['returned string', 'status', XHR Object]
         // if one of them fails this won't run
         $('#mytasks').html(tasks_data[0]);
         $('#messages_li').html(msgs_data[0]);
         setTimeout(refreshTopBar, 9000);
     });

 }

jquery GET ajax 调用多个页面

jquery GET ajax call for multiple pages

ajax

jquery

get