Question

我有一个小的jQuery / AJAX脚本，用于检查用户名是否已被使用。它查询PHP脚本，该脚本又输出具有指定用户名的用户数。我有一个错误计数器，可以跟踪表单上的验证错误数量，如果用户名已被使用，我会增加计数器。

//Keep track of number of errors
 var errors = 0;
 //Keep track of error messages
 var errorMsg = "";

//Check if the passwords match (this part works as expected)
 if($("#password").val() != $("#repeat").val()) {
     errors++;
     errorMsg += "<li>Passwords do not match!</li>";
 }

     //Now check if the user exists
     var userName = $("#user").val();
    $.ajax({   
        type: "POST",
        data : {'user': userName},
        cache: false,  
        url: "js/ajax/addUser.php?action=checkuser",   
        success: function(data){
            var result = parseInt(data);
            //For debugging purposes
            alert("Before checking the data, # of errors is: " + errors);
            if(result > 0) {
                errors++;
                errorMsg += "<li>A user with the name <strong>" + userName + "</strong> already exists!</li>";
            }
            //For debugging purposes
            alert("After checking the data, # of errors is: " + errors);

        }
    });
    //For debugging purposes
    alert("Before validating the form, # of errors is: " + errors);

     if(errors > 0) {
         //Output error message
     }
     else {
         //Send the form
     }

正如评论中所提到的，我有一些alert()用于调试。前两个（在AJAX请求中）显示正确的错误数量。但是，当我到达第三个时，它完全忽略了AJAX请求中发生的任何错误。

我已经将我的代码修改为基本要素，但如果在提供的代码段中错误不明确，我可以发布整个内容。

Answer 1

ajax是异步的。将你的逻辑置于成功之中。

//Keep track of number of errors
 var errors = 0;
 //Keep track of error messages
 var errorMsg = "";

//Check if the passwords match (this part works as expected)
 if($("#password").val() != $("#repeat").val()) {
     errors++;
     errorMsg += "<li>Passwords do not match!</li>";
 }

     //Now check if the user exists
     var userName = $("#user").val();
    $.ajax({   
        type: "POST",
        data : {'user': userName},
        cache: false,  
        url: "js/ajax/addUser.php?action=checkuser",   
        success: function(data){
            var result = parseInt(data);
            //For debugging purposes
            alert("Before checking the data, # of errors is: " + errors);
            if(result > 0) {
                errors++;
                errorMsg += "<li>A user with the name <strong>" + userName + "</strong> already exists!</li>";
            }
            //For debugging purposes
            alert("After checking the data, # of errors is: " + errors);

            if(errors > 0) {
                //Output error message
            }
            else {
                //Send the form
            }
        }
    });
    //For debugging purposes
    alert("Before validating the form, # of errors is: " + errors);

Answer 2

ajax请求的回调函数是异步执行的。因此，紧接此请求之后的代码可能会在调用返回之前执行。

Answer 3

我对此理解的问题是AJAX调用的方式。第三次提醒

alert("Before validating the form, # of errors is: " + errors);

与您进行的$ .ajax调用同时被调用。

由于您的目的是同步调用调用，您可能希望使用jquery Deffered Object链接调用

如果您正在寻找当前代码中的解决方案，则需要在成功处理程序中移动以下代码。

alert("Before validating the form, # of errors is: " + errors);

     if(errors > 0) {
         //Output error message
     }
     else {
         //Send the form
     }

Answer 4

您可以将 async：false 添加到您的功能中，一切都适合您。

type: "POST",
async:false

jQuery无法正确跟踪验证错误

4 个答案: