关于用户名验证的JQuery .ajax（）

Question

I was trying to validate username whether exist or not with the following code. But it somehow don't work to prevent the existing username. **NOTE: checkusr2.php is a simple php to check wheter the username in database.

function verifyUser() {
    var usr = $("#username").val();
    $.ajax( {  
        type: "POST",  
        url: "checkusr2.php",  
        data: "username="+ usr,  
        success: function(msg) {
            $("#txtHint").ajaxComplete(function(event, request, settings){
                FormErrors = false;
                if(msg == 'OK') {
                    FormErrors = true;
                    $('#formElem').data('username',FormErrors); 
                } else {
                    $('#formElem').data('username',FormErrors);
                }
            });
        }
    });
}

/** calling the function to check. **/

verifyUser();
if($('#formElem').data('username')){
    alert('Username exist, please try another username.');
    return false;
}

Answer 1

Use an http proxy like Charles, Fiddler, WireShark, etc... to view the ajax request you are sending and verify that the response is what you expect.

For one thing, you are making an asynchronous call (the A in Ajax) to get the response for whether the username exists. The check, immediately after the verifyUser call is being called as soon as you call the verifyUser and the the request to checkusr2.php may or may not have actually returned by then.

I have also never seen the ajaxComplete set inside of the success handler. I think you may want to change it like this:

function verifyUser() {
    var usr = $("#username").val();
    $.ajax( {  
        type: "POST",  
        url: "checkusr2.php",  
        data: "username="+ usr,  
        success: function(msg) {
            if(msg != 'OK') {
                alert('Username exists, please try another username.');
                $("#username").val("");
            }
        };

    });
}