Question

我尝试用PHP，jQuery和AJAX完成一个“真正的”MVC。

我有一个前端（Web-GUI，jQuery）触发AJAX-Calls到后端（PHP＆amp; MySQL）并根据这些AJAX-Calls的结果重新（渲染）前端。

例如：

用户名列表（来自Active Directory）显示在前端，如果单击其中一个，则会触发AJAX-Call，导致后端的数据库操作。

当AJAX-Call完成后，页面将根据模型新“状态”后端数据库操作的结果重新呈现。

一切正常，但是当Web-GUI用户连续快速点击该用户名列表中的许多用户时，Web-GUI要么冻结，要么得到布局错误，比如混乱的HTML表。 ..

我想要的是阻止用户单击这些用户连续快速或以某种方式通过我的应用程序捕获它。

我在网上搜索了几天，并尝试通过将下一个调用放入上一次调用的success-function来嵌套AJAX调用。

$.ajax({

    cache: false,
    type: "POST",
    url: '/index.php/ssadmin/delUser',
    data: {userName: userName, repoName: repoName, locationName: locationName}

}).success(function () {

    // DO STUFF ...

    $.ajax({

        type: "POST",
        url:  '/index.php/ssadmin/changePermissions',
        data: { userName: userName, permissions: "r", repoName: repoName, locationName: locationName }

    }).success(function( returnData ) {

        // DO STUFF ...

    }).fail(function () {

        console.log("AJAX FAILED");

    });

}).fail(function () {

    console.log("AJAX FAILED");

});

我也尝试过网络工作者。无济于事。

function userInfo(ouName, userName, repoName, locationName, locationType) {

    var workerUserInfoOU = $.work({file: '/js/workerUserInfoOU.js', args: { ouName: ouName }});
    var workerUserInfoRepo = $.work({file: '/js/workerUserInfoRepo.js', args: { userName: userName, repoName: repoName, locationName: locationName     }});

    $.when(workerUserInfoOU, workerUserInfoRepo).done(function(userInfoOU, userInfoRepo){

        //DO STUFF

    });

}//end userInfo

如果有人能指出我正确的方向，我将非常感激。

最诚挚的问候 Nero的

Answer 1

方法1，使用阻止请求：

$.ajax({ async: false, type: 'POST', ... })

方法2，使用变量指示最后一个请求是否已完成。

方法3，禁用用户刚刚点击的按钮，并在ajax请求完成时启用它。

防止jQuery中的多个AJAX调用

1 个答案: