案例：
1.输入用户名的时候要判断后台数据库中有没有要注册的用户名，有的话返回用户名被使用；
2.判断两次密码相不相同；
3.点击注册判断数据库是否插入数据信息；
html:
View Code
View Code
1 <!DOCTYPE html> 2 <htmllang="en"> 3 <head> 4 <metacharset="UTF-8"/> 5 <title>注册</title> 6 <styletype="text/css"> 7 span{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 账 号：<inputtype="text"name="user"placeholder="*必填"><span></span><br/><br/> 14 密 码：<inputtype="password"name="pwd"placeholder="*必填"><br/><br/> 15 确定密码：<inputtype="password"name="pwd"placeholder="*必填"><span></span><br/><br/> 16 <inputtype="button"value="注册"> 17 </body> 18 <scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 19 <scripttype="text/javascript"> 20 var $btn = $("input[type=button]"); 21 var $iptName = $("input[type=text]"); 22 var $iptPwd = $("input[type=password]"); 23 var $span = $("span"); 24 $iptName.on("input",function(){ 25 $.ajax({ 26 type:"post", 27 url:"2-register.php", 28 data:{"action":"select","user":$iptName.val()}, 29 dataType:"json", 30 success:function(data){ 31 // console.log(data); 32 // $span.eq(0).text("名字可以使用！"); 33 if(data.error =="0"){ 34 $span.eq(0).text("被使用！"); 35 returnfalse; 36 }else{ 37 $span.eq(0).text("可以使用！"); 38 } 39 }, 40 }); 41 }); 42 $iptPwd.on("input",function(){ 43 if($iptPwd.eq(0).val()==""||$iptPwd.eq(1).val()==""){ 44 $span.eq(1).text("不能为空！"); 45 returnfalse; 46 } 47 elseif($iptPwd.eq(0).val()== $iptPwd.eq(1).val()){ 48 $span.eq(1).text("可以使用！"); 49 returnfalse; 50 } 51 elseif($iptPwd.eq(0).val()!= $iptPwd.eq(1).val()){ 52 $span.eq(1).text("不一致！"); 53 returnfalse; 54 } 55 }); 56 $btn.on("click",function(){ 57 $.ajax({ 58 type:"post", 59 url:"2-register.php", 60 data:{"action":"insert", 61 "user":$iptName.val(), 62 "pwd":$iptPwd.eq(1).val(), 63 }, 64 dataType:"json", 65 success:function(data){ 66 console.log(data); 67 if(data.insert =="0"){ 68 alert("注册成功！"); 69 }else{ 70 alert("注册失败！"); 71 returnfalse; 72 } 73 // if(data) 74 // alert("注册成功！"); 75 }, 76 }); 77 }); 78 </script> 79 </html>
php:
1 <?php 2 // 设置字符集 3 header("Content-type:text/html;charset=utf-8"); 4 // 获取前端的数据 5 $action = $_POST['action']; 6 // 建立连接 7 $conn =@mysqli_connect("localhost","root","","mess"); 8 // 设置编码 9 $conn -> query("set names utf8"); 10 // 先判断该用户名是否已经被注册了 11 // 先进行查询操作 12 // 判断前端页面的请求是插入数据还是查询数据 13 switch($action){ 14 case'select': 15 $user = $_POST['user'];//用户名 16 $sql ="SELECT name FROM users WHERE name='{$user}'"; 17 $result = $conn -> query($sql); 18 if(mysqli_num_rows($result)>0){ 19 echo '{"error":"0"}'; 20 // exit; 21 }else{ 22 echo '{"error":"1"}'; 23 }; 24 break; 25 case'insert': 26 $user = $_POST['user'];//用户名 27 $pwd = $_POST['pwd'];//密码(通常会对密码进行加密)md5加密 28 $sql ="INSERT INTO users (name,pwd) VALUES ('{$user}','{$pwd}')"; 29 $conn ->query($sql); 30 if(mysqli_affected_rows($conn)>0){ 31 echo '{"insert":"0"}'; 32 }else{ 33 echo '{"insert":"1"}'; 34 } 35 break; 36 default: 37 alert("写的什么！"); 38 break; 39 } 40 ?>
效果：