jquery ajax成功还是错误？

Question

我正在尝试实现引导登录表单。当用户提交时，我将进行 ajax 调用以提交到 Servlet，我可以在其中检查有效性。如果用户名和密码有效，我将重定向到主页。如果没有，我想将 JSON 消息发送回屏幕。

ajax 如何知道我发送回页面的消息是错误消息还是成功消息？如何在上面的登录字段上显示该消息？谢谢!

$(document).ready(function () {
 $('#form-signin').validate({
    rules: {
        login: {
            minlength: 3,
            maxlength: 15,
            required: true               
        },
        password: {
            minlength: 3,
            maxlength: 15,
            required: true                
        }
    },
    messages: {               //messages to appear on error
         login: {
             required:"Please Enter your user ID."                      
              },               
          password: {
              required: "Please Enter Password."                     
              }
        },
    highlight: function (element) {
        $(element).closest('.control-group').addClass('has-error');
    },
    unhighlight: function (element) {
        $(element).closest('.control-group').removeClass('has-error');
    },
    submitHandler: function(form) {
    alert("submit click");
                  $.ajax({
                   url:"/ePay/UserValidationServlet",
                  type:"POST",
                  dataType: "json",
                  data: $('#form-signin').serialize(),
                  error: function(errorMessage) {
                    console.log(errorMessage); // Optional
                    },
               success: function(response){
                   alert(response);
             }
           });
        }
});
});

DEMO

Answer 1

实现此目的的一种方法:

在要显示错误消息的位置放置一个隐藏的 div:

<div id="errorMessage" style="display: none"></div>

在表单提交成功和出现验证错误时，让 ajax 调用返回 200 (OK) 状态。响应正文应该是 JSON。 (您已经通过设置 dataType: 'json' 表明您需要 JSON。)

当没有验证错误时，返回的 JSON 可能如下所示:

{ "success": true }

像这样的验证错误:

( "success": false, "message": "Authentication failed." }

那么你的ajax成功回调将如下所示:

success: function(result) {
    if (result.success) {
        // Handle the success result.
    } else {
        $('#errorMessage').html(result.message);
    }
}

更新回复评论:

我想当表单提交成功时服务器可以返回重定向，但它也可能返回:

{ "success": true, "redirectUrl": "/xxxxx" }

然后成功处理程序将是:

success: function(result) {
    if (result.success) {
        window.top.location = result.redirectUrl;
    } else {
        $('#errorMessage').html(result.message);
    }
}

有时会通过 ajax 提交表单，但成功不应导致重定向。一种情况是表单位于弹出窗口上，成功提交表单只会关闭弹出窗口。