ajax - jQuery AJAX 表单提交错误工作成功不

Question

编辑

好的，所以我可以正常登录，但是当我输入错误信息时，我会被重定向到登录页面，我需要保持在同一页面上并显示错误消息e.preventDefault();似乎不起作用。

   $(function() { 
    $("#login-form").submit(function(e) { 
        $('.fail').hide();
        $.ajax({  
            url:"/login",
            type: "post",  
            data: $(this).serialize(),
            error:function(){
                $('.fail').show();
                e.preventDefault();
            },
            success: function(){ 
                document.location = '/'; 
                }
        });
        return false; 
    });
});

Answer 1

你实际上并没有对表单做任何事情，我试着评论你的代码来告诉你发生了什么。

我猜你使用 PHP 服务器端来处理这段代码。

在 PHP 中，您要检查用户凭据，然后告诉浏览器。如果登录成功则发回"y"，如果登录失败"n"。

<script type="text/javascript">
$(function() { 
    $("#login-form").submit(function() { 
        $('.fail').hide();
        $.ajax({  
            url:"/login",
            type: "post",  
            data: $(this).serialize(),
            error:function(){
                $('.fail').show();
            },
            success: function(data) {
                if (data == "y") {
                   //Login was successful. Redirect statement here?
                } else {
                   //Failed login message here
                }
            }
        });
        return false; 
    });
});
</script>

编辑

尝试将其添加到您的成功函数中。请让我知道成功登录和登录失败会得到什么。

success: function(data) {
    console.log(data);
}

编辑 2

这是因为你的ajax调用成功了，只是登录失败了。这就是调用成功处理程序的原因。

要对此进行排序，您需要查看从服务器返回的内容，这没什么吗？在这种情况下尝试：

success: function(data) {
    if (data == "") {
        e.preventDefault();
    } else {
        //Login successful, redirect user.
    }
}

Answer 2

您应该添加：

success: function(data){ 
   /* Validation data here, if authentication answer is correct */
   if(data == 'ok')
       document.location = '/'; 
   else 
      /* show error here */
}

Answer 3

当 URL 被找到并且可以访问时，成功发生。
找不到 URL 时会发生错误。
如果您想检查回调消息，您必须在 URL 页面中打印它并检查数据是否成功。像这样：

<script type="text/javascript">
$(function() { 
$("#login-form").submit(function() { 
    $('.fail').hide();
    $.ajax({  
        url:"/login",
        type: "post",  
        data: $(this).serialize(),
        success:function(data){
            if(data=="true"){
               alert("success");
            }else{
               alert("faild")
            }
        }
    });
    return false; 
});
});

</script>

在 login.php 中

<?php
//check if for true...
echo "true";
//and if it is not true...
echo "false";
?>

成功的数据参数是一个字符串，它返回“/login”的html内容