Question

我有一个登录表单，我试图用ajax处理。

首次出现时效果很好，

点击登录按钮，
如果您的详细信息是正确的，则您已登录并重定向。

如果您的详细信息不正确，则会显示错误消息。

如果您等待错误消息消失并再次单击登录按钮，则可以正常工作。

如果你不等，似乎提交表格为什么这样做？

这是代码

var timeout = null;

$(function() {
    $('form').submit(function() {
        var action = $(this).attr('action');
        var type = $(this).attr('method');
        $.ajax({
            url: action,
            type: type,
            data: {
                email: $('input[name=email]').val(),
                pass: $('input[name=pass]').val()
            },
            success: function(data) {
                switch (data.status) {
                    case false:
                        login_error(data.message);
                        return false;
                        break;
                    case true:
                        window.location = data.message;
                        return false;
                        break;
                }
                return false;
            }
        });
        return false;
    })
});

function login_error(message) {
    $('form').effect('shake', { distance: 10, times: 3 }, 50);
    if (timeout !== null) {
        clearTimeout(timeout);
        $('#login').stop().hide();
        show_error(message);
    } else {
        show_error(message);
    }
}

function show_error(message) {
    $('#error').html(message)
            .show("drop", {direction: 'left'}, 500);
    timeout = setTimeout(function() {
        $('#error').hide("drop", {direction: 'right'}, 500);
        timeout = null;
    }, 5000);
}

<小时/> 的修改
好的，所以它实际上并没有刷新页面，

正在设置要显示的表单：none;

我已经通过代码添加了一大堆console.log（）并点击两次登录，现在看起来像：

var timeout = null;

$(function() {
    $('form').submit(function() {
        console.log(1);
        var action = $(this).attr('action');
        console.log(2);
        var type = $(this).attr('method');
        console.log(3);
        $.ajax({
            url: action,
            type: type,
            data: {
                email: $('input[name=email]').val(),
                pass: $('input[name=pass]').val()
            },
            success: function(data) {
                console.log(4);
                switch (data.status) {
                    case false:
                            console.log(5);
                        login_error(data.message);
                        return false;
                        break;
                    case true:
                            console.log(6);
                        window.location = data.message;
                        return false;
                        break;
                }
                console.log(7);
                return false;
            }
        });
        console.log(8);
        return false;
    })
});

function login_error(message) {
    console.log(9);
    $('form').effect('shake', { distance: 10, times: 3 }, 50);
    console.log(10);
    if (timeout !== null) {
        console.log(11);
        clearTimeout(timeout);
        $('#login').stop().hide();
        console.log(12);
        show_error(message);
        console.log(13);
    } else {
        console.log(14);
        show_error(message);
        console.log(15);
    }
}

function show_error(message) {
    console.log(16);
    $('#error').html(message)
            .show("drop", {direction: 'left'}, 500);
    console.log(17);
    timeout = setTimeout(function() {
        console.log(18);
        $('#error').hide("drop", {direction: 'right'}, 500);
        timeout = null;
    }, 5000);
    console.log(19);
}

输出为：

1
  2
  3
  POST http://localhost/buzz/ajax/login 200 OK 30ms
  8
  4
  5
  9
  10个
  14个
  16个
  17个
  19个
  15个
  第二次点击
  1
  2
  3
  POST http://localhost/buzz/ajax/login 200 OK 30ms
  8
  4
  5
  9
  10个
  11个
  12个
  16个
  17个
  19个
  13个
  18

Answer 1

一种选择是使用常规按钮，而不是提交按钮。使用您调用验证/ ajax的按钮上的onclick。

Answer 2

我猜测它与表单的动画和/或#error没有完成有关。您可能希望确保登录失败后某些内容发生了变化。因此，在代码中提交表单以确保表单可提交之前的一些if/else语句可能会使此工作...在提交之前确保用户名和密码的值可能是个好主意形式....

以下是未经测试的代码的快速示例，其中包含对更改的一些评论......

$('form').submit(function() {
     //DEFINE "ISVALID()"....
     if($('input[name=pass]').val().ISVALID())
     {
         //your do login code here...
     }
     else
     {
         login_error("Please enter a password!");
     }
})
function login_error(message) {
    //CLEAR PASSWORD
    $('input[name=pass]').val() = "";
    //THE REST OF YOUR CODE HERE...
}

javascript停止表单提交

2 个答案: