In the previous article http://www.jb51.net/article/83504.htm, user authentication was done with JavaScript, but the password was not validated, this time this feature was appended and implemented in JavaScript and jquery, respectively.
A. Key code implemented with jquery Ajax
Implemented as follows
/*jquery implements
$ (document). Ready (function () {
$ ("#account"). blur (function (event) {
$.ajax ({
type:) Get ",
URL:" checkaccount.php?account= "+$ (" #account "). Val (),
datatypes:" Text ",
success:function (msg) {
$ (' #accountStatus '). HTML (msg);
},
error:function (JQXHR) {
alert ("Account Error!) ")
},
});
});
$ ("#password"). blur (function (event) {
$.ajax ({
type: "Get",
URL: "checkpassword.php?"
), Datatypes: "Text",
data: "Account=" +$ ("#account"). Val () + "&password=" +$ ("#password"). Val (),
success : function (msg) {
$ ("#passwordStatus"). HTML (msg);
},
error:function (JQXHR) {
alert ("Password query has an error!"). ")
},
});
});
}); */
two. The key to implement with JavaScript Code
Implemented as follows
JavaScript implementation function CheckAccount () {var xmlhttp;
var name = document.getElementById ("account"). Value; if (window.
XMLHttpRequest) xmlhttp=new XMLHttpRequest ();
else xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP");
Xmlhttp.open ("Get", "checkaccount.php?account=" +name,true);
Xmlhttp.send (); Xmlhttp.onreadystatechange=function () {if (xmlhttp.readystate==4 && xmlhttp.status==200) document.getEl
Ementbyid ("Accountstatus"). Innerhtml=xmlhttp.responsetext;
} function Checkpassword () {var xmlhttp;
var name = document.getElementById ("account"). Value;
var pw = document.getElementById ("password"). Value; if (window.
XMLHttpRequest) xmlhttp=new XMLHttpRequest ();
else xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP");
Xmlhttp.open ("Get", "checkpassword.php?account=" +name+ "&password=" +pw,true);
Xmlhttp.send (); Xmlhttp.onreadystatechange=function () {if (xmlhttp.readystate==4 && xmlhttp.status==200) document.getElementById ("Passwordstatus"). Innerhtml=xmlhttp.responsetext; }
}
MySQL and the database part of the same as the previous blog has not changed, the results of the operation of the following figure
The above is the entire content of this article, I hope to help you learn.