Many times, when we register personal information online, after submitting the page, we always have to wait for the page to refresh to tell us whether the registration is successful. When the network is poor, if a large number of things are registered, after a long wait After refreshing the page, I get the message "Your username has already been used" or XXXXXXX is illegal. I think everyone must be very upset. Today I will introduce a simple registration procedure using AJAX to realize registration without page refresh + real-time detection of user information. Hope it helps everyone. Okay, let’s look at the registration interface code first:
< ;tr>
center" bgcolor="#FFFFFF">
>
& lt; font color = "#ff6633" & gt;*& lt;/font & lt; & lt;/td & gt; & lt; td align = "left" bgcolor = "#fffff" ID = "Chec k " > 4-16 characters, English lowercase, Chinese characters, numbers, preferably not all numbers.
/td>
"userpwd"
>
td align="left" bgcolor="#FFFFFF" id="pwd"> Password letters are uppercase and lowercase. 6-16 digits (including 6 and 16), limited to English and numbers. /td> "reuserpwd"
>
* td align="left" bgcolor="#FFFFFF" id="repwd"> Please enter your login password again.
.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new windownCTRL+Mouse wheel to zoom in/out';}" onclick= "if(!this.resized) {return true;} else {window.open('http://leehui1983.bokee.com/photo/view.fcgi?mode=3&id=4108996');}" alt="" src="http://leehui1983.bokee.com/photo/view.fcgi?mode=3&id=4108996" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width =screen.width*0.7; this.alt='Click here to open new windownCTRL+Mouse wheel to zoom in/out';}" border=0>
The red part is a The js function to be called will start to be called when we select a text box. Now let's look at the code of the ajaxreg.js file contained in the page above, which contains the ajax framework and some judgment functions.
var http_request=false;
function send_request(url){//Initialization, specify the processing function, the function to send the request
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.overrideMime Type("text/xml" ;
} catch(e){
try{ if(!http_request ){//Exception, failed to create object instance
window.alert("Failed to create XMLHttp object!"); / Determine the request method, URL, and whether to execute the next code synchronously
http_request.open("GET",url,true);
http_request.send(null);
}
//Processing return Information function
function processrequest(){
if(http_request.readyState==4){//Judge object status
if(http_request.status==200){//The information has been returned successfully, start Processing information
document.getElementById(reobj).innerHTML=http_request.responseText;
}
else{//The page is abnormal
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=" Username cannot be empty! ";
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=" User password cannot be empty! ";
f.userpwd.focus(); getElementById(obj).innerHTML=" The password length cannot be less than 6 characters! ";
f.userpwd.focus();
return false;
}
else{
document.getElementById(obj).innerHTML=" < font color =red>The password meets the requirements! ";
}
}
function pwdrecheck(obj){
var f=document.reg;
var repwd=f.reuserpwd.value;
if (repwd==""){
document.getElementById(obj).innerHTML=" Please enter your password again!";
f.reuserpwd.focus(); > document.getElementById(obj).innerHTML=" The passwords entered twice are inconsistent! ";
f.reuserpwd.focus();
return false;
}
else{
document.getElementById(obj).innerHTML=" < ;font color =red>The password entered is correct!
As for the password, only the length is judged in real time. Friends who are interested can expand the function.Let’s take a look at what checkuserreg.php does:
header('Content-Type: text/html;charset=GB2312');//Avoid garbled output
include('inc/config.inc.php');//Contains basic database configuration information
include('inc/dbclass.php');//Contains database operation classes
$username=trim($_GET ['username']);//Get the registered name
//--------------------------------- --------------------------------------------------
$db=new db;//Generate an instance from the database operation class
$db->mysql($dbhost,$dbuser,$dbpassword,$dbname);//Call the connection parameter function
$ db->createcon();//Call the create connection function
//--------------------------------- -------------------------------------------------- --
$querysql="select username from cr_userinfo where username='$username'";//Query member name
$result=$db->query($querysql);
$rows= $db->loop_query($result);
//If the member name has been registered
//------------------------ -------------------------------------------------- ---------
if($rows){
echo" This member name has already been registered, please change the member name!";
}
//If the member name is not registered, it will be displayed
//--------------------------------- -------------------------------------------------- --
else{
echo" This member name can be registered! ";
}
if($action==reg){
$addsql="insert into cr_userinfo
values(0,'$username','$userpwd', '$time',50,1,'$userquestion','$useranswer')";
$db->query($addsql);
echo" Congratulations, your registration is successful! Please clickhereto log in! ";
}
$db->close();//Close the database connection
?>
The comments are quite detailed, everyone should understand I can understand it. After checking that the information is legal, we submit the registration information to implement the PHP code for non-refresh registration, senduserinfo.php:
header('Content-Type: text/html;charset =GB2312');//Avoid garbled output
include('inc/config.inc.php');//Contain basic database configuration information
include('inc/dbclass.php');//Include Database operation class
$username=trim($_GET['username']);//Get the registration name
$userpwd=md5(trim($_GET['userpwd']));//Get the registration password
$time=date("Y-m-d");
//-------------------------- -------------------------------------------------- ----
$db=new db;//Generate an instance from the database operation class
$db->mysql($dbhost,$dbuser,$dbpassword,$dbname);//Call the connection parameter function
$db->createcon(); // Call the create connection function
//-------------------------- -------------------------------------------------- ------
//Start inserting data
//-------------------------------- -------------------------------------------------- --
$addsql="insert into cr_userinfo values(0,'$username','$userpwd','$time',50,1,'$userquestion','$useranswer')";
$db->query($addsql);
echo"
Congratulations, your registration is successful! Please clickhereto log in! ";
$db->close();//Close the database connection
?>
OK!!大功告成，来看看效果图：
1.
2.
3.
4.
5.
怎么样？还不错吧，贴了这么多累死了，希望大家喜欢～～～～
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
