AJAX_检测用户名是否可用

 

==========================HTML代码

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 </head>
 7 <body>
 8 <form action="" method="post">
 9 username:<input type="text" id="n" name="name" onblur="checkuser()"/>
10 <span id="s"></span><br>
11 password:<input type="password" id="p" name="password" /><br>
12 </form>
13 <script type="text/javascript">
14     //兼容处理
15 function getXMLHttp(){
16     var xhr = null;
17     //异常处理
18     try{
19         //实例化非IE浏览的XMLHttpRequest对象
20         //如果是IE浏览器，则会产生异常，就会跳转到catch块中执行
21         xhr = new XMLHttpRequest();
22     } catch(e){
23         //实例化IE浏览器的XMLHTTPRequest对象
24         try{
25             xhr = new ActiveXObject('Microsoft.XMLHTTP');
26         } catch(ex){
27             xhr = new ActiveXObject('Msxml2.XMLHTTP');
28         }
29     }
30     return xhr;
31 }
32 
33 function checkuser(){
34     //获取用户名文本框的value值
35     var name = document.getElementById('n').value;
36     
37     //1. 实例化XMLHTTPRequest对象
38     xmlhttp = getXMLHttp();
39     //2. 调用open准备ajax请求
40     xmlhttp.open('get', 'register.php?name='+name);
41     //3. 调用send方法发送ajax请求
42     xmlhttp.send(null);
43     //4. 通过onreadystatechange事件接收后台返回数据
44     xmlhttp.onreadystatechange = function(){
45         if(xmlhttp.readyState == 4){
46             var span_obj = document.getElementById('s');
47             //判断接收结果为1还是2
48             if(xmlhttp.responseText == 1){
49                 span_obj.innerHTML = '该用户名可以使用';
50                 span_obj.style.color = 'green';
51             } else {
52                 span_obj.innerHTML = '该用户名已被占用';
53                 span_obj.style.color = 'red';
54             }
55         }
56     }
57 }
58 </script>
59 </body>
60 </html>

 

==============================================PHP代码

 

 1 <?php
 2 /**
 3  * 
 4  * @authors Your Name (you@example.org)
 5  * @date    2017-10-28 10:55:37
 6  * @version $Id$
 7  */
 8 header("content-type:text/html;charset=utf-8");
 9 //1. 接收前台传递的name值
10 $name = $_GET['name'];
11 //2. PHP操作数据库  --- 6步
12 //① 链接数据库服务器
13 $link = mysql_connect('localhost', 'root', 'root');
14 //② 设置字符集
15 mysql_query('set names utf8');
16 //③ 选择数据库
17 mysql_query('use test');
18 //④ 编写SQL语句并执行,调用test数据库中的user表单中name属性
19 $sql = "select * from user where name='$name'";
20 //返回一个结果集资源
21 $res = mysql_query($sql);
22 //⑤ 分析SQL的执行结果
23 //取出资源中的第一行数据，返回一个一维数组(id  name  password3个字段)
24 $info = mysql_fetch_assoc($res);
25 // die($info['name']);
26 if(empty($info['name'])){
27     //如果查询结果为空，则可以使用该用户名,返回1
28     echo 1;
29 } else {
30     //如果查询结果不为空，则不能使用，返回2
31     echo 2;
32 }

 

=============================数据库内容

 

 

posted on 2017-10-30 09:58  屌大的男人  阅读(137)  评论(0)    收藏  举报

导航