Php – ajax call to check duplicate data

ajaxjqueryphp

Here is the form to have ajax check out user existence.

<!DOCTYPE html>

<html>
    <head><title>Register new user!</title>
    <script src="jquery-1.7.1.min.js"></script>
    </head>
    <body>
        Username:
        <input type="text" name="username" id="username"/><span id="user"></span><br/>
        Password:
        <input type="password" name="password" id="password"/><br/>
        <input type="button" value="Register" name="submit" id="submit" onclick="register_user();"/>
    </body>
    <script>
        function register_user()
        {
            $.ajax(
                {
                    type:"POST",
                    data:username,
                    url:"userexists.php"                    
                })
            .fail(function()
                  {
                    $('#user').html("This user already exists");
                  }
            );                
        }
    </script>
</html>

And here is the userexists.php module

<?php
    // connection to the db
    define(IPHOST,"localhost");
    define(DBPASSWORD,"");
    define(DBUSER,"root");
    define(DATABASE,"ajaxtest");
    define(TABLENAME,"at");

    $conn=mysql_connect(IPHOST,DBUSER,DBPASSWORD) or die(mysql_error());
    mysql_select_db(DATABASE) or die(mysql_error());
    $username=$_POST('username');
    $sql="SELECT username FROM ".TABLENAME." WHERE username=".$username;
    $query=mysql_query($sql);
    if(0!=mysql_numrows($query))
    {
        //
    }
    else
    {

    }
?>

But I am stuck to really figure out how the ajax function actually works, what should I enter the blank field after I know that the entered username has been used, for example ? I don't understand ajax at all.

[UPDATE]
Thank you, I understand it now, I have got several answers, don't know which one to choose as the best reply. No option to choose all.

Best Solution

You have a lot of mistakes in your code, try codes below:

<!DOCTYPE html>

<html>
    <head><title>Register new user!</title>
    <script src="jquery-1.7.1.min.js"></script>
    </head>
    <body>
        Username:
        <input type="text" name="username" id="username"/><span id="user"></span><br/>
        Password:
        <input type="password" name="password" id="password"/><br/>
        <input type="button" value="Register" name="submit" id="submit" onclick="register_user();"/>
    </body>
    <script>
        function register_user()
        {
            $.ajax({
                type: "POST",
                data: {
                    username: $('#username').val(),
                },
                url: "userexists.php",
                success: function(data)
                {
                    if(data === 'USER_EXISTS')
                    {
                        $('#user')
                            .css('color', 'red')
                            .html("This user already exists!");
                    }
                    else if(data === 'USER_AVAILABLE')
                    {
                        $('#user')
                            .css('color', 'green')
                            .html("User available.");
                    }
                }
            })              
        }
    </script>
</html>

And for your php code:

<?php
    // connection to the db
    define(IPHOST,"localhost");
    define(DBPASSWORD,"");
    define(DBUSER,"root");
    define(DATABASE,"ajaxtest");
    define(TABLENAME,"at");

    $conn=mysql_connect(IPHOST,DBUSER,DBPASSWORD) or die(mysql_error());
    mysql_select_db(DATABASE) or die(mysql_error());

    $username = mysql_real_escape_string($_POST['username']); // $_POST is an array (not a function)
    // mysql_real_escape_string is to prevent sql injection

    $sql = "SELECT username FROM ".TABLENAME." WHERE username='".$username."'"; // Username must enclosed in two quotations

    $query = mysql_query($sql);

    if(mysql_num_rows($query) == 0)
    {
        echo('USER_AVAILABLE');
    }
    else
    {
        echo('USER_EXISTS');
    }
?>