ajax登錄驗證-js

本文轉載自查看原文 2017-07-07 23:59 1862 js/ ajax

1、html代碼：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>ajax登錄</title>
 6     </head>
 7     <body>
 8         <div>
 9             <form action="" method="post">
10                 <div id="showinfo"></div>
11                 用戶名：<input type="text" name="username" id="username"/>
12                 <br />
13                 密碼：<input type="password" name="password" id="password"/>
14                 <input type="button" id="btn" value="登錄"/>
15             </form>
16         </div>
17         <script type="text/javascript">
18             window.onload = function(){
19                 var btn = document.getElementById("btn");
20                 btn.onclick = function(){
21                     
22                     var username = document.getElementById("username").value;
23                     var passwords = document.getElementById("password").value
24                     
25                     
26                     var xhr = null;
27                     if(window.XMLHttpRequest){
28                         xhr=new XMLHttpRequest();
29                     }else{
30                         xhr = ActiveXObject("Microsoft.XMLHTTP");
31                     }
32                     xhr.open('get','./check.php?username='+username+"&password="+passwords,true);
33                     xhr.onreadystatechange = function(){
34                         if(xhr.readyState==4){
35                             if(xhr.status==200){
36                                 var data = xhr.responseText;
37                                 if(data==1){
38                                     document.getElementById('showinfo').innerHTML = "用戶名或密碼錯誤"
39                                 }else if(data==2){
40                                     document.getElementById('showinfo').innerHTML = "登錄成功"
41                                     
42                                 }
43                             }
44                         }
45                     }
46                     xhr.send(null);
47                     }
48             }
49         </script>
50     </body>
51 </html>

2、后台代碼（此處是php）

 1 <?php
 2 $username = $_GET['username'];
 3 $password = $_GET['password'];
 4 
 5 if($username=='admin' && $password=='123'){
 6     echo 2;
 7 }else{
 8     echo 1;
 9 }
10 ?>

3、實現結果展示

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery的ajax實現登錄驗證 ajax 用 get方法驗證登錄使用ajax來進行登錄驗證 js 滑塊登錄驗證 js中的ajax（用戶登錄） AJAX - 實現一個簡單的登錄驗證用ajax去做圖片驗證碼登錄 PHP + ajax 實現異步登錄驗證基於Ajax與用戶認證系統的登錄驗證用js實現登錄的簡單驗證