> 웹 프론트엔드 > JS 튜토리얼 > JavaScript와 jquery는 각각 사용자 로그인 확인을 구현합니다.javascript 기술

JavaScript와 jquery는 각각 사용자 로그인 확인을 구현합니다.javascript 기술

WBOY
풀어 주다: 2016-05-16 15:02:27
원래의
1408명이 탐색했습니다.

이전 글 //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과 데이터베이스 부분은 이전 블로그 포스팅처럼 변경되지 않았습니다. 실행 결과는 아래와 같습니다

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿