Php+ajax to implement no refresh registration (real-time detection with user name) _php skills

Source: Internet
Author: User
Many times, we register personal information online, after submitting the page, always wait for the page refresh to tell us whether the registration is successful, encounter network bad, if registered a large list of things, after a long wait page refresh, it is really "your username has been used" or xxxxxxx illegal, I think everyone's mood must be particularly uncomfortable, today to introduce an AJAX implementation page does not refresh registration + real-time detection of user information simple registration procedures, I hope to help you. OK, first look at the Registration interface code:

<table width= "831" border= "0" align= "center" cellpadding= "0" cellspacing= "0" >
<tr style= "Display:none" >
&LT;TD height= "align=" "Center" id= "result" > </td>
</tr>
</table>
<table width= "100%" height= "256" border= "0" align= "center" cellpadding= "1" cellspacing= "1" >
<tr>
&LT;TD width= "align=" "left" bgcolor= "#FFFFFF" > User name: </td>
&LT;TD width= "310" align= "center" bgcolor= "#FFFFFF" >
<input name= "username" type= "text" class= "Inputtext" id= "username"onchange= "Usercheck (' Check") "Onblur=" Usercheck (' check ')>
<font color= "#FF6633" >*</font></td>
&LT;TD align= "left" bgcolor= "#FFFFFF" id= "Check" > 4-16 characters, English lowercase, Chinese characters, numbers, preferably not all numbers. </td>
</tr>
<tr>
&LT;TD width= "align=" "left" bgcolor= "#FFFFFF" > User Password:</td>
&LT;TD width= "310" align= "center" bgcolor= "#FFFFFF" >
<input name= "userpwd" type= "password" class= "Inputtext" id= "Userpwd"onchange= "Pwdcheck (' pwd ')" onblur= "Pwdcheck (' pwd ') ">
<font color= "#FF6633" >*</font> </td>
&LT;TD align= "left" bgcolor= "#FFFFFF" id= "pwd" > cipher letters are case-sensitive. 6-16 digits (including 6, 16), limited in English and digital. </td>
</tr>
<tr>
&LT;TD width= "align=" "left" bgcolor= "#FFFFFF" > Duplicate Password:</td>
&LT;TD width= "310" align= "center" bgcolor= "#FFFFFF" >
<input name= "reuserpwd" type= "password" class= "Inputtext" id= "Reuserpwd"onchange= "Pwdrecheck (' repwd ')" onblur= "Pwdrecheck (' repwd ')" >
<font color= "#FF6633" >*</font> </td>
&LT;TD align= "left" bgcolor= "#FFFFFF" id= "repwd" > Please enter your login password again. </td>
</tr>
</table>

As shown in figure:

The red part is a call to the JS function, when we select a text box will begin to call, now we look at the page contains the Ajaxreg.js file code, which contains the AJAX framework and some judgment functions.

var Http_request=false;
function send_request (URL) {//initialization, specifying handler functions, sending requested functions
Http_request=false;
Start initializing the XMLHttpRequest object
if (window. XMLHttpRequest) {//mozilla browser
Http_request=new XMLHttpRequest ();
if (http_request.overridemimetype) {//Set MIME category
Http_request.overridemimetype ("Text/xml");
}
}
else if (window. ActiveXObject) {//ie browser
try{
Http_request=new ActiveXObject ("msxml2.xmlhttp");
}catch (e) {
try{
Http_request=new ActiveXObject ("Microsoft.XMLHTTP");
}catch (e) {}
}
}
if (!http_request) {//exception, failed to create object instance
Window.alert ("Create XMLHTTP object failed!") ");
return false;
}
Http_request.onreadystatechange=processrequest;
Determine how to send the request, the URL, and whether to execute the next code synchronously
Http_request.open ("Get", url,true);
Http_request.send (NULL);
}
Functions that process return information
function ProcessRequest () {
if (http_request.readystate==4) {//Judge object state
if (http_request.status==200) {//information returned successfully, start processing information
document.getElementById (reobj). Innerhtml=http_request.responsetext;
}
else{//page is not normal
Alert ("The page you requested is not normal!") ");
}
}
}
function Usercheck (obj) {
var F=document.reg;
var Username=f.username.value;
if (username== "") {
document.getElementById (obj). innerhtml= "<font color=red> user name cannot be empty! </font> ";
F.username.focus ();
return false;
}
else{
document.getElementById (obj). innerhtml= "reading data ...";
Send_request (' checkuserreg.php?username= ' +username);
Reobj=obj;
}
}
function Pwdcheck (obj) {
var F=document.reg;
var Pwd=f.userpwd.value;
if (pwd== "") {
document.getElementById (obj). innerhtml= "<font color=red> user password cannot be empty! </font> ";
F.userpwd.focus ();
return false;
}
else if (f.userpwd.value.length<6) {
document.getElementById (obj). innerhtml= "<font color=red> password length cannot be less than 6 bits! </font> ";
F.userpwd.focus ();
return false;
}
else{
document.getElementById (obj). innerhtml= "<font color=red> passwords meet the requirements! </font> ";
}
}
function Pwdrecheck (obj) {
var F=document.reg;
var Repwd=f.reuserpwd.value;
if (repwd== "") {
document.getElementById (obj). innerhtml= "<font color=red> Please enter the password again! </font> ";
F.reuserpwd.focus ();
return false;
}
else if (f.userpwd.value!=f.reuserpwd.value) {
document.getElementById (obj). innerhtml= "<font color=red> Two input passwords are inconsistent! </font> ";
F.reuserpwd.focus ();
return false;
}
else{
document.getElementById (obj). innerhtml= "<font color=red> password entered correctly! </font> ";
}
}

It is not difficult to see that the data is transmitted through asynchronous transmission to checkuserreg.php and then return the information displayed to achieve real-time detection of user name purposes, as for the password, only the length of real-time judgments, interested friends can expand the function. Let's see what checkuserreg.php has done:

<?php
Header (' content-type:text/html;charset=gb2312 ');//Avoid garbled output
Include (' inc/config.inc.php ');//contains database basic configuration information
Include (' inc/dbclass.php ');//contains Database operations class
$username =trim ($_get[' username '));//Get registered Name
//-----------------------------------------------------------------------------------
$db =new db;//to generate an instance from a database operation class
$db->mysql ($dbhost, $dbuser, $dbpassword, $dbname);//Call connection parameter function
$db->createcon ()//call to create a join function
//-----------------------------------------------------------------------------------
$querysql = "Select username from cr_userinfo where username= ' $username '";/Inquiry member name
$result = $db->query ($querysql);
$rows = $db->loop_query ($result);
If the member name has been registered
//-----------------------------------------------------------------------------------
if ($rows) {
echo "<font color=red> This member name has been registered, please change the member name!" </font> ";
}
The member name does not register displays

//----------------------------------------------------------------------------
else{
echo "<font color=red> This member name can register!" </font> ";
}
if ($action ==reg) {
$addsql = "INSERT INTO Cr_userinfo
VALUES (0, ' $username ', ' $userpwd ', ' $time ', 50,1, ' $userquestion ', ' $useranswer ');

$db->query ($addsql);
echo " <font color=red> Congratulations, register successfully! Please click <a href=login.php> here </a> login! </font> ";
}
$db->close ();//Close database connection
?>

Note Written in detail, we should all be able to understand, and then look at the information legal after we submit registration information to achieve no refresh registered PHP code, senduserinfo.php:

<?php
Header (' content-type:text/html;charset=gb2312 ');//Avoid garbled output
Include (' inc/config.inc.php ');//contains database basic configuration information
Include (' inc/dbclass.php ');//contains Database operations class
$username =trim ($_get[' username '));//Get registered Name
$userpwd =md5 (Trim ($_get[' userpwd '));//Get registered Password
$time =date ("y-m-d");

//-----------------------------------------------------------------------------------
$db =new db;//to generate an instance from a database operation class
$db->mysql ($dbhost, $dbuser, $dbpassword, $dbname);//Call connection parameter function
$db->createcon ()//call to create a join function
//-----------------------------------------------------------------------------------
Start inserting data
//-----------------------------------------------------------------------------------
$addsql = "INSERT into Cr_userinfo values (0, ' $username ', ' $userpwd ', ' $time ', 50,1, ' $userquestion ', ' $useranswer ')";
$db->query ($addsql);
echo " <font color=red> Congratulations, register successfully! Please click <a href=login.php> here </a> login! </font> ";

$db->close ();//Close database connection
?>

Ok!! All done, look at the effect chart:

1.

2.

3.

4.

5.

What do you think? Not bad, put up so much tired, I hope you like ~ ~ ~ ~ ~

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.