Objective
Directly on the code is a bit unkind, so in accordance with the celestial tradition, the entire paragraph described .... (I have a limited ability to express my language, and we can endure it.)
function
Used when registering users on a Web site, primarily for the purpose of not refreshing the user name entered by the user or whether the email was registered.
This feature you must have seen, most sites have, I have been very interested in this feature, so these days to study the next JQuery +
Ajax
The whole of a function is not perfect, but enough to deal with the common use of code (more cattle to explore their own features)
File Description
reg.php//For registration page
check_user.php//For User Authentication page (get,post mode optional)
Jquery-1.7.1.js//For jquery file download address: Http://code.jquery.com/jquery-1.7.1.js (right key Save As can)
code example
Reg.php registration page (contains 2 ways, please choose one)
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>php+ajax Asynchronous communication Registration verification </title>
<script type= "Text/javascript" src= "Jquery-1.7.1.js" ></script> <!--never forget to refer to the jquery file, otherwise you cannot execute-->
<script type= "Text/javascript" >
$ (function () {
Way one jQuery (recommended for general application, easy to use)
$ ("#user"). blur (function () {//text box mouse Focus vanishing Event
$.get ("check_user.php?user=" +$ ("#user"). Val (), Null,function (data)//Here get mode can be changed to post mode as required, others without modification
{
$ ("#chk"). HTML (data); Add HTML code to an element with the ID CHK
});
})
Mode two Ajax way (more complex, as no special need recommended to use way one)
$ ("#user"). blur (function () {
$.ajax ({
URL: "check_user.php",//Request Verification page
Type: ' Get ',//request can be changed to post Note Verify page Receive mode
Data: "User=" +$ ("#user"). Val (),//Get Table text box data, take note of the previous user here format Key=value other ways please refer to the AJAX manual
Success:function (data)
{//When the request succeeds
$ ("#chk"). HTML (data); Add HTML code to an element with the ID CHK
}
});
})
})
</script>
<body>
<form id= "Reg" action= "" method= "POST" >
User name: <input id= "User" type= "text"/> <span id= "chk" ></span>
</form>
</body>
check_user.php Asynchronous Communication page code is as follows:
Copy Code code as follows:
<?php
Header ("content-type:text/html;charset=gb2312");
Get method to obtain data (depending on how the submission is committed asynchronously)
if ($_get[' user '])
{
$user =$_get[' user '];
Database matching can be done here, this time omitting direct judgment
if ($user = = "Admin")
echo "<font color=red> username has been registered! </font> ";
Else
echo "<font color=red> user name can use </font>";
}else{}
Post method to get data (depending on how the submission is committed asynchronously)
if ($_post[' user '])
{
$user =$_post[' user '];
Database matching can be done here, this time omitting direct judgment
if ($user = = "Admin")
echo "<font color=red> username has been registered! </font> ";
Else
echo "<font color=red> user name can use </font>";
}else{}
?>
There are 2 ways to post and get two, so you can say that there are 4 ways to choose, and it should be able to meet the general application.
In addition to the other parameters in Ajax such as: Request data type, Ajax start operation and so on events. Please refer to the AJAX manual. Here does not make elaboration, the more complex recommendation uses the first method.
Matching diagram:
