php - AJAX 403 禁止，仅有时

Question

本质上，我正在尝试检查是否使用了用户名，因为用户键入它会触发 ajax，并且在 keyup 上检查它是否被使用，如果是，它会突出显示输入红色。在谷歌浏览器中，我打开了错误控制台，有时我收到 403，有时没有。

当我开始点击删除或输入用户名太快时，我注意到了 403，其他时候无论我做什么都会发生，而且更进一步，有时根本不会。文件权限正常，路径正确（我认为）。非常感谢任何帮助。

这是代码：

$(document).ready(function()
{
    $("#username").keyup(function()
    {
        $.ajax({
            url: '/resources/ajax/userCallbacks.php',
            type: 'post',
            data: 'checkName='+$(this).val(),
            success: function(response){

                // Check response
                switch(response)
                {
                    case 'taken':
                        $("#username").addClass('red-border');
                        break;
                    case 'available':
                        $("#username").removeClass('red-border');
                        break;
                }
            }
        });
    });
});

Answer 1

请尝试超时，也许你在短时间内有很多请求......

var mytimeout = false;

$(document).ready(function()
{
    $("#username").keyup(function()
    {
    if(mytimeout != false) {
        window.clearTimeout(mytimeout);
    }
    mytimeout = window.setTimeout("doAjaxRequest()",500);
    });
});

function doAjaxRequest() {

        $.ajax({
            url: '/resources/ajax/userCallbacks.php',
            type: 'post',
            data: 'checkName='+$("#username").val(),
            success: function(response){

                // Check response
                switch(response)
                {
                    case 'taken':
                        $("#username").addClass('red-border');
                        break;
                    case 'available':
                        $("#username").removeClass('red-border');
                        break;
                }
            }
        });
}

Answer 2

这是我一直在使用的代码片段，可以防止同时触发太多请求。

这个想法是您将 ajax 调用的状态存储在 this.ajax 中。一旦请求新的呼叫，前一个呼叫将立即取消，从而防止网络服务器过载。

$(document).ready(function()
{
    $("#username").keyup(function()
    {
        if( this.ajax )
        {
            this.ajax.abort();
        }
        this.ajax = $.ajax({
            url: '/resources/ajax/userCallbacks.php',
            type: 'post',
            data: 'checkName='+$(this).val(),
            success: function(response){

                // Check response
                switch(response)
                {
                    case 'taken':
                        $("#username").addClass('red-border');
                        break;
                    case 'available':
                        $("#username").removeClass('red-border');
                        break;
                }
            }
        });
    });
});