多个jQuery ajax调用 - 以前的调用抛出失败

时间:2014-07-11 12:50:55

标签: javascript jquery ajax

我的网站上有一个登录表单,它使用ajax将登录信息发送给php。 登录后,用户可以注销并再次重定向到登录页面。我的问题是,每次您在之前注销后登录时,fail方法会触发abort错误消息。

例如:

*user logs in successfully*
*user logs out*
*user logs in successfully*
The following error occurred: abort abort
*user logs out*
*user logs in successfully*
The following error occurred: abort abort
The following error occurred: abort abort
*user logs out*

它只是继续这样,每次都会抛出更多的错误。

当用户点击登录表单提交按钮时,这是执行的代码:

p.onMouseClick = function()
{
    var savedRef = this;

    $('#loginForm').on('submit', function(e){

        if(this.request){
            this.request.abort();
        }

        var form = $(this);
        var inputs = form.find("input, select, button, textarea");
        var serializedData = form.serialize();

        inputs.prop("disabled", true);

        this.request = $.ajax({
            url: "http://***********/login.php",
            type: "post",
            data: serializedData
        });

        this.request.done($.proxy(function(result){
            if(result['returnCode'] == 1){
                playerInfo = new PlayerInfo(result['returnMessage']);
                savedRef.loggedIn();
                inputs.prop("disabled", true);
            }
        }, this));
        this.request.fail(function (jqXHR, textStatus, errorThrown){
            // log the error to the console
            console.error(
                    "The following error occured: "+
                    textStatus, errorThrown
            );
        });
        this.request.always(function(){
            inputs.prop("disabled", false);
        });

        e.preventDefault();
    });
};

1 个答案:

答案 0 :(得分:2)

似乎错误是因为:

if(this.request){
    this.request.abort();
}

我认为这是为了防止在另一次通话中拨打电话的功能。 试着这样做:

if(this.request){
    return false;
}

此外,非常重要。从click事件中取出form.submit事件。

点击事件只需调用提交功能:

var savedRef;

p.onMouseClick = function()
{   
    savedRef = this;    
    $('#loginForm').submit();
};

$('#loginForm').on('submit', function(e){

    if(this.request){
        this.request.abort();
    }        

    var form = $(this);
    var inputs = form.find("input, select, button, textarea");
    var serializedData = form.serialize();

    inputs.prop("disabled", true);

    this.request = $.ajax({
        url: "http://***********/login.php",
        type: "post",
        data: serializedData
    });

    this.request.done($.proxy(function(result){
        if(result['returnCode'] == 1){
            playerInfo = new PlayerInfo(result['returnMessage']);
            savedRef.loggedIn();
            inputs.prop("disabled", true);
        }
    }, this));
    this.request.fail(function (jqXHR, textStatus, errorThrown){
        // log the error to the console
        console.error(
                "The following error occured: "+
                textStatus, errorThrown
        );
    });
    this.request.always(function(){
        inputs.prop("disabled", false);
    });

    e.preventDefault();
});