이전 글 //m.sbmmt.com/article/83504.htm에서는 javascript를 이용하여 사용자 인증을 구현했지만, 이번에는 이 기능을 추가하여 javascript와 jquery를 사용했습니다.
1. jquery의 ajax를 이용하여 구현한 키코드
구현은 다음과 같습니다
/*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. 자바스크립트 사용의 핵심코드
구현은 다음과 같습니다
//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; } }
mysql과 데이터베이스 부분은 이전 블로그 포스팅처럼 변경되지 않았습니다. 실행 결과는 아래와 같습니다
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.