AJAX操作04_模拟用户注册(jQ)

来源：互联网发布：白银理财投资数据分析编辑：程序博客网时间：2024/05/17 15:17

利用ajax技术实现用户注册，主要实现功能点如下：

1）用户输入注册名字后，当焦点移开时系统立刻判断该用户名是否被使用并提醒给用户

2）判断用户信息是否输出完整，若不完整，注册时会提醒

3）判断用户两次输入密码是否一致，若不一致，注册时提醒

4）注册成功信息弹窗返回给用户

1.视图文件

<form action=""><div>用户名：<input id="txt" type="text"><span></span></div><div>密码：<input class="pwd" type="password"></div><div>密码：<input class="pwd" type="password"></div><input id="btn" type="button" value="注册"></form>

2.js控制文件

<script type="text/javascript" src='jquery-3.0.0.min.js'></script><script type="text/javascript">var $name = $("#txt");//用户名var $pwd = $('.pwd');var $btn = $('#btn');var bol = false;//change指针移开触发,发送服务器请求，判断用户名是否存在$name.on("change",function(){$.ajax({//请求类型type:"post",//请求地址url:"register.php",//发送的数据data:{type:"check",name:$name.val()},//请求数据类型dataType:"json",//请求成功返回的数据success:function(data){//考虑到用户会无视用户名已经存在的提醒而直接点击注册，设置bol变量阻止用户这一行为bol = data.bol;//判断用户名是否存在，提示字体标记不同颜色if (data.bol){$name.next().html("可以注册").css("color","green");}else{$name.next().html("用户名已存在").css("color","red");}}})})//点击注册$btn.on("click",function(){if(!bol){alert("用户名已存在");return;}//信息不完整返回if($name.val()==""||$pwd.val()==""){alert("请输入完整信息");return;}//两次密码不一致返回if($pwd.eq(0).val()!=$pwd.eq(1).val()){alert("两次密码不一致");return;}//满足注册条件发送服务器请求$.ajax({type:"post",url:"register.php",//发送数据中包含数据处理类型data:{type:"add",name:$name.val(),pwd:$pwd.val()},dataType:"json",success:function(data){if(data.bol){alert("注册成功");}else{alert("注册失败");}}})})</script>

3．php文件

<?php//连接数据库$conn = mysqli_connect("localhost","root","","html5-7");$conn->query("set names utf8");//获取数据处理类型$type = $_POST['type'];//根据不同的数据处理类型返回数据或将数据添加给数据库switch($type){    case 'check':        $name = $_POST['name'];        $sql = "SELECT * FROM user WHERE  name = '{$name}'";        $ret = $conn->query($sql);        if(mysqli_affected_rows($conn)>0){            echo '{"bol":false}';        }else{            echo '{"bol":true}';        }        break;    case 'add':        $name = $_POST['name'];        $pwd = $_POST['pwd'];        $sql = "INSERT INTO user (name,pwd) VALUES ('$name','$pwd')";        $ret = $conn->query($sql);        if(mysqli_affected_rows($conn)>0){            echo '{"bol":true}';        }else{            echo '{"bol":false}';        }}

4.最终效果

5.github

https://github.com/RidingACodeToStray/AJAX_JQ_register.git

1 0