如何在php和ajax中创建一个注册页面，检查某个用户名是否已经存在而没有页面刷新？

Question

I have a register.php file which creates new users for my site . But if a person uses a username which is already existing an error is generated only when he enters the whole form and submits . How to implement Ajax/Jquery so as to show it without him submitting the form ?

Answer 1

It's actually not too bad if you're familiar with JS/Ajax Basics.

You'll basically need to call a javascript function from your register page..

HTML on Register Form

<!--This is the textbox with the value we are checking-->
<!--onkeyup can be substituted by any other event you wish to use intead-->
<input onkeyup="checkUsername(this.value);" name="username" id="username" />

<!--This is where we'll display the response-->
<div id="response"></div>

That JS function will create an ajax object, and pass the username variable to the PHP page for processing, and will await a response...

JavaScript

function checkUsername(username){

    //Construct the url, passing the username to the PHP page
    var url= 'checkNameAvailability.php?username=' + encodeURIComponent(username);

    if (ajax.readyState == 4 || ajax.readyState == 0) {
        ajax.open("POST", url, true);
        ajax.onreadystatechange = function (){
            if (ajax.readyState == 4) {    

                //When you get the result from the PHP, put it in the response div
                document.getElementById('response').innerHTML=ajax.responseText;
            }
        }; 
        ajax.send(null);
    }
}

//Just copy and paste this function - don't change it at all.
function getXmlObject() {
        if (window.XMLHttpRequest) {
            return new XMLHttpRequest();
        } else if(window.ActiveXObject) {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            showError('Status: Cound not create XmlHttpRequest Object. Consider upgrading your browser.','Please Wait');
        }
    }

Then the PHP page, grabs the username variable, processes it in whatever way it needs to (is it available, is it long enough, does it have invalid chars, is it inappropriate, etc..) and returns a response.

checkNameAvailability.php

<?php

    //Accept a variable called 'username' that we are checking.
    $username=$_REQUEST['username'];

    //Run Checks to see if username is valid
    if ($username=="Dutchie") 
            die ("Username is reserved or already taken");
    if (strlen($username)<5) 
            die("The username is too short.");

   die("Username is Valid");

?>