PHP + AJAX implements no-refreshing registration (real-time detection of user names). many times, we register personal information online. after submitting the page, we have to wait for the page to refresh to tell us whether the registration is successful, when the network is poor, if you have registered a large string of things, after a long wait for the page to refresh, it is indeed "your user name has been used" or XXXXXXX is invalid, I think everyone is in a particularly bad mood. today I will introduce a simple registration program that does not refresh registration on the AJAX implementation page + detects user information in real time. I hope it will help you. Okay. check the registration page Code First:
| · User name: |
* |
It must be 4-16 characters long and contain lowercase letters, Chinese characters, numbers, and numbers. |
| · User password: |
* |
Password letters are case sensitive. 6-16 digits (including 6 and 16 digits. |
| · Duplicate password: |
* |
Enter the logon password again. |
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + 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? Method = 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 window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>
The red part is the js function to be called later. when a text box is selected, it will start to be called. now let's look at the ajaxreg. the js file code contains the ajax framework and some judgment functions.
Var http_request = false;
Function send_request (url) {// initialization, specifying the processing function and sending the request function
Http_request = false;
// Start initializing the XMLHttpRequest object
If (window. XMLHttpRequest) {// Mozilla browser
Http_request = new XMLHttpRequest ();
If (http_request.overrideMimeType) {// sets the 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. An error occurred while creating the object instance.
Window. alert ("An error occurred while creating the XMLHttp object! ");
Return false;
}
Http_request.onreadystatechange = processrequest;
// Determine the request sending method, URL, and whether to execute the following code synchronously
Http_request.open ("GET", url, true );
Http_request.send (null );
}
// Function for processing the returned information
Function processrequest (){
If (http_request.readyState = 4) {// judge the object status
If (http_request.status = 200) {// The message is returned successfully. start to process the information.
Document. getElementById (reobj). innerHTML = http_request.responseText;
}
Else {// The page is abnormal.
Alert ("the page you requested is abnormal! ");
}
}
}
Function usercheck (obj ){
Var f = document. reg;
Var username = f. username. value;
If (username = ""){
Document. getElementById (obj). innerHTML = "the user name cannot be blank! ";
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 = "the user password cannot be blank! ";
F. userpwd. focus ();
Return false;
}
Else if (f. userpwd. value. length <6 ){
Document. getElementById (obj). innerHTML = "The password length cannot be less than 6 characters! ";
F. userpwd. focus ();
Return false;
}
Else {
Document. getElementById (obj). innerHTML = "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 ();
Return false;
}
Else if (f. userpwd. value! = F. reuserpwd. value ){
Document. getElementById (obj). innerHTML = "The two passwords are inconsistent! ";
F. reuserpwd. focus ();
Return false;
}
Else {
Document. getElementById (obj). innerHTML = "The password is entered correctly! ";
}
}
It is not hard to see that data is asynchronously transmitted to checkuserreg. php then sends the return information to detect the user name in real time. as for the password, only the real-time determination of the length is made. if you are interested, you can expand the function. Let's take a look at what checkuserreg. php has done:
Header ('content-Type: text/html; charset = GB2312 '); // avoid output garbled characters
Include ('Inc/config. inc. php'); // contains basic database configuration information
Include ('Inc/dbclass. php'); // contains the database operation class
$ Username = trim ($ _ GET ['username']); // GET the registration name
// Configure //-----------------------------------------------------------------------------------
$ Db = new db; // generates an instance from the database operation class
$ Db-> mysql ($ dbhost, $ dbuser, $ dbpassword, $ dbname); // call the connection parameter function
$ Db-> createcon (); // call to create a connection function
// Configure //-----------------------------------------------------------------------------------
$ Querysql = "select username from cr_userinfo where username = '$ username'"; // query the member name
$ Result = $ db-> query ($ querysql );
$ Rows = $ db-> loop_query ($ result );
// If the member name has been registered
// Configure //-----------------------------------------------------------------------------------
If ($ rows ){
Echo "this member name has been registered. please change the member name! ";
}
// Display if the member name is not registered
// Configure //-----------------------------------------------------------------------------------
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! registration successful! Click here to log on! ";
}
$ Db-> close (); // close the database connection
?>
The comments are still Detailed. you should be able to understand them. after reading the valid information, we submit the registration information to implement the PHP code for refreshing new registration. senduserinfo. php:
Header ('content-Type: text/html; charset = GB2312 '); // avoid output garbled characters
Include ('Inc/config. inc. php'); // contains basic database configuration information
Include ('Inc/dbclass. php'); // contains the 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 ");
// Configure //-----------------------------------------------------------------------------------
$ Db = new db; // generates an instance from the database operation class
$ Db-> mysql ($ dbhost, $ dbuser, $ dbpassword, $ dbname); // call the connection parameter function
$ Db-> createcon (); // call to create a connection function
// Configure //-----------------------------------------------------------------------------------
// Start data insertion
// Configure //-----------------------------------------------------------------------------------
$ Addsql = "insert into cr_userinfo values (0, '$ username',' $ userpwd', '$ time', 50, 1,' $ userquestion ',' $ useranswer ')";
$ Db-> query ($ addsql );
Echo "Congratulations! registration successful! Click here to log on! ";
$ Db-> close (); // close the database connection
?>
OK !! Let's take a look:
1.
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + 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 = 4109258 ');} "alt =" "src =" http://leehui1983.bokee.com/photo/view.fcgi? Method = 3 & id = 4109258 "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>
2.
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + 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 = 4109286 ');} "alt =" "src =" http://leehui1983.bokee.com/photo/view.fcgi? Method = 3 & id = 4109286 "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>
3.
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + 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 = 4109299 ');} "alt =" "src =" http://leehui1983.bokee.com/photo/view.fcgi? Method = 3 & id = 4109299 "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>
4.
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + 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 = 4109333 ');} "alt =" "src =" http://leehui1983.bokee.com/photo/view.fcgi? Method = 3 & id = 4109333 "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>
5.
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + 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 = 4109336 ');} "alt =" "src =" http://leehui1983.bokee.com/photo/view.fcgi? Method = 3 & id = 4109336 "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>
How is it? It's not bad. it's so exhausting. I hope you like it ~~~~
