Ajax请求检查用户名

Question

I am creating a signup form in HTML/CSS/JS which uses an AJAX request to get response from server. In my jQuery, I use a method to validate form contents which also calls a function (containing ajax) to see if the username exists or not. I have checked the similar questions but couldn't relate to my problem.

The AJAX goes inside a function like this

function checkIfUserNameAlreadyExists(username)
{
    // false means ok, i.e. no similar uname exists
    $.ajax
    ({
        url  : 'validateUsername.php',
        type : 'POST',
        data : {username:username},

        success : function(data,status)
        {
            return data;
        } 

    });
}

The PHP code looks like this

<?php 

if($_SERVER['REQUEST_METHOD']=='POST')
{
    $enteredLoop=false;
    $linkobj = new mysqli('localhost','root','','alumni');
    $query = "select username from user where username='".$uname."'";
    $stmt = $linkobj->prepare($query);
    $stmt->execute();
    $stmt->bind_result($uname);
    while($stmt->fetch())
        $enteredLoop=true;

    if($enteredLoop)
    {
        echo "
        <script type='text/javascript'>
        $('.unamestar').html('Sorry username already exists');
        $('.userName').css('background-color','rgb(246, 71, 71)');
                $('html,body').animate({
                    scrollTop: $('.userName').offset().top},
                    'slow');
        </script>";
        return;
    }
}
?>

The function checkIfUserNameAlreadyExists returns false by default (don't know how) or this ajax request is not submitted, and it submits the form details to php.

Any help ?

Answer 1

Your checkIfUserNameAlreadyExists() function is synchronous and your ajax call is asynchronous. That means that your function will return a value (actually no value is returned at all in your case...) before the ajax call is finished.

The easiest way to solve this, is to generate the html in the success function, based on the return value of the data variable.

Something like:

    success : function(data,status) {
        if (data === 'some_error') {
          // display your error message, set classes, etc.
        } else {
          // do something else?
        }
    } 

Apart from that, are you actually setting the value of $uname to $_POST['username'] ?

Answer 2

You need to append response script to the document for executing.

function checkIfUserNameAlreadyExists(username)
    {
        // false means ok, i.e. no similar uname exists
        $.ajax
        ({
            url  : 'validateUsername.php',
            type : 'POST',
            data : {username:username},        
            success : function(response)
            {
                $('body').append(response);
            } 

        });
    }