Question

我正在尝试实现一个bootstrap登录表单。当用户提交时，我正在进行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提交表单，但成功不应该导致重定向。一种情况是表单在弹出框中，成功的表单提交只会关闭弹出窗口。

Jquery ajax成功还是错误？

1 个答案: