Question

我正在使用xVal和MVC以及jquery验证。这一切都很好，直到我到我的自定义验证器进行ajax调用。

根据firbug Net Tab，ajax调用返回正确的值。但是出了点问题，我无法弄明白。

这是javascript代码：

    function CheckEmail() {
    var res;
    $.ajax({
        type: "GET",
        url: "/User/CheckEmail",
        data: "email=" + $('#EmailAddress').val(),
        success: function(result) {
            res = result;
        }
    });
    if (res == "True") {
        return true;
    }
    else {
        return false;
    }

}

当我单步使用firebug时，res显示为未定义。我认为这就是问题所在。

我花了4个小时重新安排和更改此代码，似乎没有任何东西可以使它正常工作。

我有一个理论认为它不会等到ajax完成后才能运行if语句。任何人都可以确认或否认吗？

Answer 1

Ajax中的'A'代表异步。

发生了什么事，你的代码被这样调用：

$.ajax(...);
if (res == "True") {        
   return true;    
} else {        
   return false;    
}

然后稍后（在毫秒之后），ajax请求返回并调用：

function(result) {
   res = result;        
}

有人会建议使Ajax调用异步，但是这会阻止在请求返回之前在浏览器中发生任何其他事情，这可能有很多原因。

最好的解决方案是将验证逻辑放在回调中，而不是放在创建和发送Ajax请求的函数中。

示例：

function CheckEmail() {    
    $.ajax({        
        type: "GET",        
        url: "/User/CheckEmail",        
        data: "email=" + $('#EmailAddress').val(),        
        success: function(result) {            
            if (result == "True") {
                doSomethingPositive();
            } else {
                warnUserInvalidEmail();
            }
        }    
    });    
}

Answer 2

是的，你是对的。 $.ajax()默认是异步调用。您可以添加async：false以使其同步。

$.ajax({
    type: "GET",
    async: false,
    url: "/User/CheckEmail",
    data: "email=" + $('#EmailAddress').val(),
    success: function(result) {
        res = result;
    }
});

Answer 3

无需对Web服务器进行同步调用。您应该尽可能地避免这些，因为用户的浏览器在等待回复期间将被锁定。

我最近编写了一个blog article about remote client-side validation（正是您要实现的目标），展示了如何使用异步请求执行此操作。

Answer 4

有点晚了，但我只能说是避免ajax表单验证 - 它会造成糟糕的用户体验。以这种方式考虑，如果表单中有50个字段并且您需要交互式验证体验，那么每次用户完成字段时，您的脚本都会调用您的服务器。打开Firebug并看一看，不要感到震惊。

XVal，JQuery Validate和Ajax哦我的！

4 个答案: