Ajax无刷新检测用户名是否存在

html代码:

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <title>XXXXXXXXXXXXXXXXXXXXXXXXX</title>
  5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6     <meta charset="utf-8">
  7     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  9     <link rel="stylesheet" href="files/css.css" type="text/css" />
 10     <link rel="stylesheet" href="files/bootstrap.min.css">
 11     <script src="files/jquery.min.js?201705251600"></script>
 12     <script type="text/javascript">
 13     //ajax函数
 14         function ajax(url,method,data,success){
 15             var xhr = null;
 16             try{
 17                 xhr = new XMLHttpRequest();
 18             }catch(e){
 19                 xhr = new ActiveXObject("Microsoft.XMHTTP");
 20             }
 21                 url+="?"+data;
 22                 xhr.open(method,url,true);
 23                 xhr.onreadystatechange=function(){
 24                     if(xhr.readyState===4){
 25                         if(xhr.status===200){
 26                             success && success(xhr.responseText);
 27                         }else{
 28                             alert(xhr.status);
 29                         }
 30                     }
 31             }
 32             xhr.send()
 33         }
 34         window.onload=function(){
 35             //dom操作
 36             var username1 = document.getElementById("username1");
 37             var verifyUserNameMsg = document.getElementById("verifyUserNameMsg");
 38             /* var verifyPasswordMsg = document.getElementById("verifyPasswordMsg"); */
 39             var btnReg = document.getElementById('btnReg');
 40             var password1 = document.getElementById("password1");
 41             var username2 = document.getElementById("username2");
 42             var password2 = document.getElementById("password2");
 43             var btnLogin = document.getElementById("btnLogin");
 44             var logout = document.getElementById("logout");
 45             var user = document.getElementById("user");
 46             var userinfo = document.getElementById("userinfo");
 47             //校验帐号
 48             username1.onblur=function(){
 49                 ajax("files/index.php","get","m=index&a=verifyUserName&username="+this.value,function(data){
 50                     var jsondata = JSON.parse(data)
 51                     verifyUserNameMsg.innerHTML=jsondata.message;
 52                     console.log(JSON.parse(data));
 53                     if(jsondata.code==1 || jsondata.code==2){
 54                         verifyUserNameMsg.style.color="red";
 55                         btnReg.disabled=true;
 56                     }else{
 57                         verifyUserNameMsg.style.color="green";
 58                         btnReg.disabled=false;
 59                     }
 60                 })
 61             }
 62                         //校验密码
 63             /* username1.onblur=function(){
 64                 ajax("files/index.php","get","m=index&a=verifypassword&password="+this.value,function(data){
 65                     var jsondata = JSON.parse(data)
 66                     verifyPasswordMsg.innerHTML=jsondata.message;
 67                     console.log(JSON.parse(data));
 68                     if(jsondata.code==1 || jsondata.code==2){
 69                         verifyPasswordMsg.style.color="red";
 70                         btnReg.disabled=true;
 71                     }else{
 72                         verifyPasswordMsg.style.color="green";
 73                         btnReg.disabled=false;
 74                     }
 75                 })
 76             } */
 77             //注册帐号
 78              btnReg.onclick=function(){
 79                  ajax("files/index.php","get","m=index&a=reg&username="+username1.value+"&password="+password1.value,function(data){
 80                     alert("注册成功！请采用ftp工具或资源管理器连接");
 81                     window.location.href='files/help.php';
 82                  })
 83              }
 84              //登录帐号
 85              btnLogin.onclick=function(){
 86                 ajax("files/index.php","get","m=index&a=login&username="+username2.value+"&password="+password2.value,function(data){
 87                     console.log(data);
 88                     var jsondata = JSON.parse(data);
 89                     if(jsondata.code===1){
 90                         alert(jsondata.message);
 91                         
 92                     }else{
 93                         alert(jsondata.message);
 94                         user.style.display="block";
 95                         location.reload();
 96                         //userinfo.innerHTML=cookiename;
 97                     }
 98                 })
 99              }
100             if(uid===undefined){
101                 // userinfo.innerHTML="";
102                 user.style.display="none";
103              }
104              if(cookiename){
105                 userinfo.innerHTML=cookiename;
106              }
107              logout.onclick=function(){
108                 console.log(123);
109                 ajax("files/index.php","get","m=index&a=logout",function(data){
110                     var jsondata = JSON.parse(data)
111                     console.log(data);
112                     if(jsondata.code === 0){
113                         alert("退出成功！");
114                         location.reload();
115                     }else{
116                     }
117                 })
118              }
119         }
120         function getCookie(cookiename){
121                     var strCookie = document.cookie;
122                     var arrCookie = strCookie.split(";");
123                      for(var i = 1;i<arrCookie.length;i++){
124                          var arr = arrCookie[i].split("=");
125                          if(arr[0]===cookiename){
126                                 return arr[1];
127                            }
128                      }
129         }
130         var cookiename = getCookie(" username");
131         var uid  = getCookie(" uid");
132         console.log(cookiename);
133         console.log(uid);
134     </script>
135 </head>
136 <body>
137     <div class="header">XXXXXXXXXXXXXXXXXXXXXXXXX</div>
138     <div id="container">
139         <div id="sidebar">
140             <div id="reg" >
141                 <h1 class="register-title">注册</h1>
142                 <div class="register">
143                     <input type="text" class="register-input" name="username" id="username1" placeholder="请输入帐号">
144                     <p id="verifyUserNameMsg"></p>
145                     <input type="password" class="register-input" name="password" id="password1" placeholder="请输入密码">
146                     <input type="button" value="注册" class="register-button" id="btnReg">
147                 </div>
148                     <!-- 登陆 -->
149                     <!--<div id="login">
150                         <h1 class="register-title">登录</h1>
151                           <div class="register">
152                             <input type="text" name="username2" id="username2" class="register-input" placeholder="请输入帐号">
153                             <input type="password" class="register-input" name="password2" id="password2" placeholder="请输入密码">
154                             <input type="button" value="登录" class="register-button" id="btnLogin">
155                           </div>
156                     </div> -->
157             </div>
158         </div>
159     </div>
160     <p><center><p>只允许英文字符4-16个字符</center></p>
161     <hr style=" 310px;">
162     <p><center><a href="#" target="_blank">官方首页</a> | <a href="http://www.miibeian.gov.cn" target="_blank">浙ICP备16041280号</a> | <a href="/files/help.php" target="_blank">帮助</a></center></p>
163 </body>
164 </html>

View Code

php代码:

files/index.php

 1 <?php
 2 error_reporting(E_ALL ^ E_DEPRECATED);
 3 /*
 4   * 入口文件
 5   * 数据库基本信息 host port username password databases
 6   * 控制层，get参数选择
 7   * DB类中加载数据库连接类(DB_Mysql)，给数据库传入数据库基本信息
 8   * Controller类中初始化code与message，建立send方法，array_merge并json_encode e
 9   * exit();输出一个消息并且退出当前脚本
10   * 加载模型层，以call_user_func方法，把第一个参数作为回调函数，其余参数为回调函数的参数
11   * 
12   * 
13  */
14         //数据层
15         $config=array(
16             'db_host'        =>    'localhost',
17             'db_port'        =>    '3306',
18             'db_user'        =>    'root',
19             'db_password'    =>    '',
20             'db_name'        =>    'xlight_ftp',
21         );
22         //控制层
23         define("module_action",$_REQUEST["a"]);
24         // mysql库的控制层
25         class DB{
26             public static function factory(){
27                 global $config;
28                 //mysql库
29                 require_once("./libs/Class/DB_Mysql.class.php");
30                 return DB_Mysql::instance($config);
31             }
32         }
33         class Controller{
34              public $db = null;
35              private $ajaxData=array(
36                  "code"=>0,
37                  "message"=>"",
38              );
39              public function __construct(){
40                  $this->db = DB::factory();
41              }
42              public function send($data=array()){
43                  $showdata = array_merge($this->ajaxData,$data);
44                  echo json_encode($showdata);//转成json responseText
45                  exit();    //输出一个消息并且退出当前脚本
46              }
47         }
48         //MVC中的模型层
49         require_once("./Controller/IndexController.class.php");
50         //把第一个参数作为回调函数调用,其余参数是回调函数的参数。
51         call_user_func(array(new IndexController,module_action));

View Code

./libs/Class/DB_Mysql.class.php

 1 <?php
 2 /*
 3  *
 4  * 这是数据库connect、query、select、连接，插入，查询
 5  * 有一个有趣的地方，就是在调用DB_Mysql::instance($config),实际上就是在new DB_Mysql($config),
 6  * new DB_Mysql($config) 会把$config保存，还会调用当前类的数据库connect方法
 7  * 
 8  */
 9 class DB_Mysql {
10     private static $instanceObj;
11     private $config ; //盛放的是数据库连接的信息，host port username password databases
12     private function __construct($config) {
13         $this->config = $config;  
14         $this->connect();
15     }
16     public static function instance($config) {
17         if (!self::$instanceObj) {
18             self::$instanceObj = new DB_Mysql($config);
19         }
20         return self::$instanceObj;
21     }
22     //连接数据库
23     public function connect() {
24         mysql_connect($this->config['db_host'],$this->config['db_user'],$this->config['db_password']);
25         mysql_select_db($this->config['db_name']);
26         $this->query("set names 'utf8'");
27     }
28     //执行sql语句
29     public function query($sql) {
30         return mysql_query($sql);
31     }
32     public function select($sql) {
33         $query = $this->query($sql);
34         $rs = array();
35         //将查询的结果以数字1的索引方式存在数组里面
36         $queryArr = mysql_fetch_array($query, 1);
37          if($queryArr) {
38             $rs[] = $queryArr;
39          }
40         return isset($rs[0])?$rs[0]:false;
41     }
42 }

View Code

./Controller/IndexController.class.php

  1 <?php
  2 class IndexController extends Controller {
  3     /**
  4      * @ 用户名验证 传返回值。
  5      * return 0: 表示在数据库没有查到有相同用户名
  6      * return 1: 用户名的长度和类型不合法
  7      * return 2: 表示在数据库查到了相同用户名
  8      * $rs存在:  表示表示用查到了相同的用户名，return 2；
  9      */
 10     private function _verifyUserName($username) {
 11         if (strlen($username) < 4 || strlen($username) > 16) {return 1;}
 12                 if (preg_match("/^[a-z0-9#]*$/", $username)) {
 13         //查数据库里面的数据
 14         $rs = $this->db->select("SELECT `username` FROM `acct_table` WHERE `username`='{$username}' LIMIT 1");
 15         if ($rs) {return 2;}else{return 0;}
 16         } else {return 1;}
 17     }
 18     /* private function verifypassword($password) {
 19         $password = $_REQUEST['password'];
 20         if (strlen($password) < 4 || strlen($password) > 16) {return 1;}
 21             if (preg_match("/^[a-z0-9#]*$/", $password)) {
 22                 return 4;
 23                 } 
 24     } */
 25     /**
 26      * @ interface 用户名验证
 27      * 前台传来的get参数，选择执行IndexController下来action
 28      */
 29     public function verifyUserName() {
 30         $username = $_REQUEST['username'];
 31         $code  = $this->_verifyUserName($username);
 32         switch ($code) {
 33             case 0:
 34                 $this->send(array('code'=>0,'message'=>'恭喜你，该用户名可以注册！'));
 35                 break;
 36             case 1:
 37                 $this->send(array('code'=>1,'message'=>'用户名只能是英文4-16个字符！'));
 38                 break;
 39             case 2:
 40                 $this->send(array('code'=>2,'message'=>'对不起，该用户名已经被注册了！'));
 41                 break;
 42             default:
 43                 break;
 44         }
 45     }
 46 
 47     /**
 48      * @ interface 用户注册
 49      * $username 是帐号
 50      * $password 是密码
 51      * $code  是检测的返回值 1长度太短 2帐号已注册 0正确
 52      * 
 53      */
 54     public function reg() {
 55         $username = $_REQUEST['username'];
 56         $password = $_REQUEST['password'];
 57         $code = $this->_verifyUserName($username);
 58         //if($code ==0){$this->sendByAjax(array('code'=>1,'message'=>""))}
 59         if ($code !== 0 || strlen($password)<3 || strlen($password) > 20) {
 60             $this->send(array('code'=>1,'message'=>'注册失败！'));
 61         }
 62         //密码加密，插入数据库里面
 63         $password = md5($password);
 64         if (false === $this->db->query("insert into acct_table (host_port,username, password) values ('21','{$username}', '{$password}')")) {
 65             $this->send(array('code'=>1,'message'=>'注册失败！'));
 66         }else {
 67             $this->send(array('message'=>'注册成功！'));
 68         }
 69     }
 70     /**
 71      * @ 用户登陆
 72      * $username 是帐号
 73      * $password 是密码
 74      * $rs 在数据库中选出所有用户名等于$username的所有信息，mysql_fetch-array($sql,1);放在$rs数组里面
 75      * setcookie(cookiename,cookie的值,cookie的有效期，cookie的服务器路径)
 76      */
 77     public function login() {
 78         $username = $_REQUEST['username'];
 79         $password = $_REQUEST['password'];
 80         //检测cookie中有没有uid，有则证明已经登录过了。
 81         if (isset($_COOKIE['uid'])) {
 82             $this->send(array('code'=>1,'message'=>'你已经登陆过了！'));
 83         }
 84         $rs= $this->db->select("select * from acct_table where username='{$username}' limit 1");
 85         if ($rs) {
 86             if ($rs['password'] != md5($password)) {
 87                 $this->send(array('code'=>1,'message'=>'密码与帐号不匹配'));
 88             } else {
 89                 //1分钟过期
 90                 setcookie('uid', $rs['uid'], time() + 60, '/');
 91                 setcookie('username', $rs['username'], time() + 60, '/');
 92                 $this->send(array('code'=>0,'message'=>'登陆成功！cookie有效时间为1min'));
 93             }
 94         } else {
 95             $this->send(array('code'=>1,'message'=>'数据库未检测到您的信息'));
 96         }
 97     }
 98     /**
 99      * @ 用户退出
100      * 通过把失效日期设置为过去的日期/时间，删除一个 cookie
101      * uid不存在的话，则证明就没有登录
102      */
103     public function logout() {
104         if (!isset($_COOKIE['uid'])) {
105             $this->send(array('code'=>1,'message'=>'你还没有登陆！'));
106         } else {
107             //通过把失效日期设置为过去的日期/时间，删除一个 cookie：
108             setcookie('uid', "", time() - 60, '/');
109             $this->send(array('code'=>0,'message'=>'退出成功！'));
110         }
111     }
112 }

View Code