Ajax User Registration and article comment implementation method

Ajax User Registration and article comment implementation method

Php+ajax Implement no Refresh Registration


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" >


<TD height= "align=" "Center" id= "result" > </td>


</tr>


</table>


<table width= "100%" height= "256" border= "0" align= "center" cellpadding= "1" cellspacing= "1" >


<tr>


<TD width= "align=" "left" bgcolor= "#FFFFFF" > User name: </td>


<TD width= "310" align= "center" bgcolor= "#FFFFFF" >


<input name= "username" type= "text" class= "Inputtext" id= "username" >





<font color= "#FF6633" >*</font></td>


<TD align= "left" bgcolor= "#FFFFFF" id= "Check" > 4-16 characters, English lowercase, Chinese characters, numbers, preferably not all numbers. </td>


</tr>


<tr>


<TD width= "align=" "left" bgcolor= "#FFFFFF" > User Password:</td>


<TD width= "310" align= "center" bgcolor= "#FFFFFF" >


<input name= "userpwd" type= "password" class= "Inputtext" id= "Userpwd" >

<font color= "#FF6633" >*</font> </td>


<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>


<TD width= "align=" "left" bgcolor= "#FFFFFF" > Duplicate Password:</td>


<TD width= "310" align= "center" bgcolor= "#FFFFFF" >


<input name= "reuserpwd" type= "password" class= "Inputtext" id= "Reuserpwd" >





<font color= "#FF6633" >*</font> </td>


<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 tutorial? 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 tutorial 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 Tutorial ($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:

&lt;?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-&gt;mysql ($dbhost, $dbuser, $dbpassword, $dbname);//Call connection parameter function


$db-&gt;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-&gt;query ($addsql);


echo "&lt;img src=images/pass.gif&gt; &lt;font color=red&gt; Congratulations, register successfully! Please click &lt;a href=login.php&gt; here &lt;/a&gt; login! &lt;/font&gt; ";





$db-&gt;close ();//Close database connection


?&gt;

Publish-&gt; submit page form-&gt; waiting to refresh the page, so when the network is more crowded, often need a long wait, today introduced with PHP+AJAX implementation page without a refresh comment, I hope to beginners Ajax phper help. So first, we need a basic AJAX development framework, file Ajax.js contains this framework, the code is as follows:


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 Checkfourm (obj) {


var F=document.fourm;


var Newfourm=f.newfourm.value;


var Username=f.username.value;


var Id=f.id.value;


if (username== "") {


document.getElementById (obj). innerhtml= "&lt;img src=images/false.gif&gt; &lt;font color=red&gt; You must log in first! &lt;/font&gt; ";


return false;


}


else if (newfourm== "") {


document.getElementById (obj). innerhtml= "&lt;img src=images/false.gif&gt; &lt;font color=red&gt; You have not filled in the comments! &lt;/font&gt; ";


return false;


}


else{


document.getElementById (obj). innerhtml= "Sending data ...";


Send_request (' sendnewfourm.php?username= ' +username+ ' &amp;newfourm= ' +newfourm+ ' &amp;id= ');


Reobj=obj;


}


}


There is a little Ajax based on the annotation, you should be able to understand this code, we can see that when we start to comment, in a specific location to show first: sending data .... The callback function is then invoked to process the data. Look at the server-side code, then:

<?php
Header (' content-type:text/html;charset=gb2312 ');//Avoid the output of Chinese garbled, Linux does not need
$username =trim ($_get[' username '));
$newfourm =trim ($_get[' Newfourm '));
$id =$_get[' id '];
$time =date ("y-m-d");

Include (' inc/config.inc.php ');
Include (' inc/dbclass.php ');
$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

$addsql = "INSERT into Cr_fourm values (0, ' $newfourm ', ' $username ', ' $time ', $id)";
$db->query ($addsql);
echo " <font color=red> Comment has been published successfully! </font> ";
Echo $addsql;
$db->close ();//Close database connection
?>

Because Jsvascript adopts UTF8 code, the return information of AJAX loopback server will appear garbled under Windows, so it is very necessary to apply the first sentence in win. The middle section two contains files are database operation class and database configuration information, I am accustomed to the basic database operations written as a class, easy to invoke. Here I believe you have a basic understanding of how the program works, in the given page of the HTML code:


&lt;table width= "100%" border= "0" cellspacing= "0" cellpadding= "0" &gt;


&lt;tr&gt;


&LT;TD align= "center" &gt;&lt;?php Echo $rows _p[p_info];? &gt;&lt;/td&gt;


&lt;/tr&gt;


&lt;tr&gt;


&LT;TD align= "center" &gt;&lt;br&gt;&lt;br&gt;&lt;iframe frameborder= "0" scrolling= "Auto" src= "showfourm.php?picid=" &lt;?= $id;? &gt; "style=height:250px; Visibility:inherit; width:98%; Z-index:2 &gt;&lt;/iframe&gt;


&lt;/td&gt;


&lt;/tr&gt;


&lt;tr&gt;


&LT;TD align= "center" &gt;&lt;br&gt;&lt;br&gt;


&lt;div align= "center" id= "result" &gt;&lt;/div&gt;


&lt;form name= "Fourm" &gt;


&lt;table width= "100%" border= "0" cellspacing= "0" cellpadding= "0" &gt;


&lt;tr&gt;


&LT;TD height= &gt; Express Comment &lt;span class= "STYLE1" &gt; (must first login) Username:


&lt;input name= "username" type= "text" value= "&lt;?= $username?&gt;" readonly&gt;


&lt;/span&gt;&lt;/td&gt;


&lt;/tr&gt;


&lt;tr&gt;


&LT;TD height= "align=" "Center" valign= "middle" &gt;&lt;textarea name= "Newfourm" class= "F" id= "Newfourm" &gt;&lt;/ Textarea&gt;&lt;/td&gt;


&lt;/tr&gt;


&lt;tr&gt;


&LT;TD height= "&gt; &lt;input name=" Submit "type=" button "value=" comment "onclick=" Checkfourm (' result ') &gt;


&lt;input name= "reset" type= "reset" id= "reset" value= "re-fill" &gt;


&lt;input name= "id" type= "hidden id=" id "value=" &lt;?php echo "$id";? &gt; "&gt;&lt;/td&gt;


&lt;/tr&gt;


&lt;/table&gt;


&lt;/form&gt;


&lt;/td&gt;


&lt;/tr&gt;


&lt;/table&gt;