js는 aax의 사용자 단순 로그인 기능을 실현한다

본고의 실례는 여러분에게 js가 aax를 실현하는 사용자가 간단하게 로그인하는 구체적인 코드를 공유하여 참고하도록 하였으며, 구체적인 내용은 다음과 같다.
원생 js 구현aax
html 페이지

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ajax </title>
</head>
<body>
<div>
 <div id="showInfo"></div>
 <form id="form">
  :<input type="text" name="username" id="username"><br>
  :<input type="password" name="password" id="password">
 <input type="button" id="btn" value=" ">
 </form>

</div>
 <script type="text/javascript">
 window.onload = function(){
 var btn = document.getElementById('btn');
 btn.onclick = function(){
  var username = document.getElementById('username').value;
  var password = document.getElementById('password').value;
  // : 
  var xhr = null;
  if(window.XMLHttpRequest){
  xhr = new XMLHttpRequest();
  }else{
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  // 
  // 
  var url = './check.php?username='+username+"&password="+password;
  xhr.open('post',url,false);

  // xhr.send(); 
  // 
  // 
  xhr.onreadystatechange = function(){
  if(xhr.readyState == 4){
   if(xhr.status == 200){
   alert(1);
   var data = xhr.responseText;
   if(data == 1){
    document.getElementById('showInfo').innerHTML = ' ';
   }else if(data == 2){
    document.getElementById('showInfo').innerHTML = ' ';
   }
   }
  };
  }
  // 
  // 
  xhr.send(null);
  alert(2);
 }
 }

 </script>
</body>
</html>
check.php

<?php 
$username = $_GET['username'];
$password = $_GET['password'];

if($username == 'admin' && $password == '123'){
 echo 2;
}else{
 echo 1;
}
?>
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.

좋은 웹페이지 즐겨찾기