Heim >Web-Frontend >js-Tutorial >JavaScript und JQuery implementieren die Überprüfung der Benutzeranmeldung bzw. Javascript-Kenntnisse
Im vorherigen Artikel /article/83504.htm wurde die Benutzerüberprüfung mit Javascript implementiert, das Passwort wurde jedoch nicht überprüft. Diesmal wurde diese Funktion hinzugefügt und mit Javascript bzw. JQuery durchgeführt.
1. Schlüsselcode implementiert mit jquerys Ajax
Die Umsetzung ist wie folgt
/*jquery实现 $(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("账号发生错误!") }, }); }); $("#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("密码查询发生错误!") }, }); }); }); */
2. Der Schlüssel zur Implementierung mit JavascriptCode
Die Umsetzung ist wie folgt
//javascript实现 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.getElementById("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; } }
Die MySQL- und Datenbankteile bleiben die gleichen wie im vorherigen Blog-Beitrag. Die laufenden Ergebnisse sind wie unten dargestellt
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.