注册信息与后台的交互

案例：

1.输入用户名的时候要判断后台数据库中有没有要注册的用户名，有的话返回用户名被使用；

2.判断两次密码相不相同；

3.点击注册判断数据库是否插入数据信息；

html:

 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 账&nbsp;&nbsp;号：<inputtype="text"name="user"placeholder="*必填"><span></span><br/><br/>
14 密&nbsp;&nbsp;码：<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>

View Code

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 ?>

View Code

效果：