Ajax实现简单的登录验证与帐号注册
2017-01-05 19:26
706 查看
上一篇博客介绍了Ajax的GET和POST方法以及上传文件的进度条展示,这篇博客将介绍一个简单的登录与注册功能的实现
这个是即将成为我毕业设计的一个网站,
在导航栏我添加了两个注册和登录的按钮和按下登录按钮后弹出的登录框,这就构成了一个简单的登录窗口
代码如下: 需引入Bootstrap
首先初始化Ajax,为了方便把Ajax绑定为登录按钮的事件函数,我们需要把它抽象化为一个函数,参数为用户输入的帐号和密码
这里,我们需要做的重点就是//dosomething这里!
首先,我们判断返回值,如果是0就证明登录失败,做相应的操作,如果为一段记录,我们就分析该记录并做相应操作
这样基本完成了登录验证,我们在添加一些网站响应,大部分代码我已经在我的另一篇博客介绍过了
BootstrapCSS与Bootstrap表单交互修改样式的JS——笔记整理
效果如下~
首先是php代码
注册成功返回1,失败返回0; 注册页面如下:
这里我引入了AngularJS作为辅助表单验证的工具,用来绑定两个密码框,使用户保证两次密码输入的一致,这里不做介绍,在接下来的博客可能会介绍
javascript代码如下:
这里为帐号这一栏绑定一个失去焦点事件:
好了 ,完成以上的几个步骤,试试效果
试着拿刚刚注册的帐号去登录 !
完整代码托管在GitHub: https://github.com/chation/musiconline
ps.整个毕业设计还没做完…
设计HTML
这个是即将成为我毕业设计的一个网站,
在导航栏我添加了两个注册和登录的按钮和按下登录按钮后弹出的登录框,这就构成了一个简单的登录窗口
代码如下: 需引入Bootstrap
<div class="modal fade" id="user_Login" tabindex="-1" role="dialog" aria-labelledby="user_Msg_to" aria-hidden="true"> <div class="modal-dialog" id="userLoginBox"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="user_Msg_to">登 录</h4> </div> <div class="modal-body"> <div id="inputBox" class="text-center"> <p>登录后在云端保存你的歌单!</p> <form id="form1"> <p> <div id="div-email_address" class="input-group"> <span class="input-group-addon"><i class="icon-envelope"></i></span> <input id="user_id" class="form-control" type="text" placeholder="邮箱地址"> </div> </p> <p> <div id="div-password" class="input-group"> <span class="input-group-addon"><i class="icon-key"></i></span> <input id="user_pass" class="form-control" type="password" placeholder="密码"> </div> </p> <a id="login_to" class="btn btn-block btn-success"> <i class="glyphicon glyphicon-log-in"></i> 登 录</a> </form> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal"> 关 闭 </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div>
设计PHP/MySql
这里主要讲述Ajax,关于php以及SQL都直接贴代码了:<?php $username='root'; $userpass='q12we3'; $host='127.0.0.1'; $database='music'; $conn=new mysqli($host,$username,$userpass,$database); if(!$conn){ echo '-1'; exit; } $user_id = trim($_GET['user_id']); $user_pass = $_GET['user_pass']; $sql="SELECT * FROM `user` WHERE `user_id` = '".$user_id."' "; $result=$conn -> query($sql); $row = $result -> fetch_row(); if($row[0]==""||$user_pass!=$row[1]){ echo "0"; }else{ $test = $row[0].'|'.$row[2].'|'.$row[3]; echo $test; } ?>
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; CREATE TABLE `user` ( `user_id` varchar(16) NOT NULL, `user_pass` varchar(16) NOT NULL, `user_name` varchar(32) NOT NULL, `user_icon` varchar(1000) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=utf8; INSERT INTO `user` (`user_id`, `user_pass`, `user_name`, `user_icon`) VALUES ('chation99', 'q12we3', '恰西', 'pic/userHead/qx.jpg'), ('admin001', 'wsad2428210', '管理员001', 'pic/userHead/bq2.jpg'); ALTER TABLE `user` ADD PRIMARY KEY (`user_id`);
Ajax实现功能
根据我们编写的PHP代码,在我们get数据到php的时候会返回0,或者一段记录,我们需要通过判断,如果为0的话代表登录失败,账号或密码错误,如果返回一段记录的话,我们就需要对这段记录进行分析以”|”为拆分号,将结果拆分为帐号,用户名以及头像地址,首先初始化Ajax,为了方便把Ajax绑定为登录按钮的事件函数,我们需要把它抽象化为一个函数,参数为用户输入的帐号和密码
function ajaxLogin(id,pass,classes){ var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET", url, false); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //do something.. } }; xmlhttp.send(); } }
这里,我们需要做的重点就是//dosomething这里!
首先,我们判断返回值,如果是0就证明登录失败,做相应的操作,如果为一段记录,我们就分析该记录并做相应操作
function ajaxLogin(id,pass,classes){ var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET", "pages/loginByNav.php?user_id=" + id + "&user_pass=" + pass, false); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { if (xmlhttp.responseText != 0) { var textArray = xmlhttp.responseText.split("|"); //用split()函数分割字符串为一个数组 //next do something.. }else{ //do something.. } } }; xmlhttp.send(); }
这样基本完成了登录验证,我们在添加一些网站响应,大部分代码我已经在我的另一篇博客介绍过了
BootstrapCSS与Bootstrap表单交互修改样式的JS——笔记整理
/* 修改input样式 */ function loginStyle(idInput, passInput, loginBtn) { var classes = "",oldClasses = ""; var userId = document.getElementById(idInput); var userPass = document.getElementById(passInput); var login = document.getElementById(loginBtn); login.addEventListener("click", function (event) { if (userId.value != "" && userPass.value != "") { oldClasses = this.getAttribute("class"); classes = oldClasses + " disabled"; this.setAttribute("class", classes); this.innerHTML = "<i class='icon-refresh icon-spin'></i> 正在登陆..."; var idU = userId.value; var passU = userPass.value; event.preventDefault(); ajaxLogin(idU,passU,oldClasses); } else { if (userId.value == "") { classes = userId.parentNode.getAttribute("class"); userId.parentNode.setAttribute("class", classes + " has-error"); } if (userPass.value == "") { classes = userPass.parentNode.getAttribute("class"); userPass.parentNode.setAttribute("class", classes + " has-error"); } } }, false); var focus = function () { this.parentNode.setAttribute("class", "input-group"); }; userId.addEventListener("focus", focus, false); userPass.addEventListener("focus", focus, false); } /* Ajax登录 */ function ajaxLogin(id,pass,classes){ var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET", "pages/loginByNav.php?user_id=" + id + "&user_pass=" + pass, false); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { if (xmlhttp.responseText != 0) { var textArray = xmlhttp.responseText.split("|"); document.getElementById("inputBox").innerHTML = "<h3>欢迎回来," + textArray[1] + "</h3><img class='img-responsive img-circle' src='" + textArray[2] + "'>"; document.getElementById("user_name_nav").innerHTML = " " + textArray[1] + ",欢迎你!"; document.getElementById("user_img_nav").setAttribute("src", textArray[2]); document.getElementById("user_info_nav").style.visibility = ""; document.getElementById("loginAndReg").style.visibility = "hidden"; document.getElementById("loginAndReg1").style.visibility = "hidden"; }else{ var login = document.getElementById("login_to"); login.setAttribute("class",classes); login.innerHTML = "<i class='glyphicon glyphicon-log-in'></i> 登 录"; removeElem("warningTip"); var tips = "账号或密码错误!"; var form = document.getElementById("form1"); form.insertBefore(alertBox(tips,"warning"),form.childNodes[0]); } } }; xmlhttp.send(); } /* 新建提示框innerHTML */ function alertBox (tip,color){ var box = document.createElement("div"); box.setAttribute("id","warningTip"); box.setAttribute("class","alert alert-"+color+" alert-dismissible"); box.setAttribute("role","alert"); box.innerHTML = "<button type='button' class='close' data-dismiss='alert' aria-label='Close'><spanaria-hidden='true'>×</span></button>"+tip; return box; }
效果如下~
注册
注册与登录大同小异,这里我多介绍一些其他功能的实现,首先是php代码
<?php $username='root'; $userpass='q12we3'; $host='127.0.0.1'; $database='music'; $conn=new mysqli($host,$username,$userpass,$database); if(!$conn){ echo '-1'; exit; } $user_name = trim($_GET['user_name']); $user_id = trim($_GET['email_address']); $user_pass = $_GET['password']; $sql = "INSERT INTO `user` (`user_id`, `user_pass`, `user_name`, `user_icon`) VALUES ('$user_id', '$user_pass', '$user_name', 'pic/default.jpg')"; if ($conn->query($sql) === TRUE) { echo "1"; } else { echo "0"; } $conn->close(); ?>
注册成功返回1,失败返回0; 注册页面如下:
<body> <div id="head-div"> <a href="../index.html"><span class="icon-music" style="font-size: xx-large"></span></a> </div> <h4>填写以下信息,加入我们</h4> <div id="form-reg" ng-app="myApp"> <form id="form1" ng-controller="samePass"> <p> <div id="div-user_name" class="input-group"> <span class="input-group-addon" id="sizing-addon2"><i class="glyphicon glyphicon-user"></i></span> <input name="user_name" required id="user_name" type="text" class="form-control" placeholder="昵称"> </div> <span style="visibility: hidden"> </span> </p> <p> <div id="div-email_address" class="input-group"> <span class="input-group-addon"><i class="icon-envelope"></i></span> <input name="email_address" id="email_address" class="form-control" type="text" placeholder="邮箱地址"> </div> <span id="sameUsername" style="color: red;visibility: hidden" >* 帐号已被占用</span> </p> <p> <div id="div-password" class="input-group"> <span class="input-group-addon"><i class="icon-key"></i></span> <input name="password" id="password" class="form-control" ng-model="pass" type="password" placeholder="设置密码"> </div> <span style="visibility: hidden"> </span> <p> <div id="div-password-again" class="input-group"> <span class="input-group-addon"><i class="icon-key"></i></span> <input id="password-again" class="form-control" ng-model="passA" type="password" placeholder="再次输入密码"> </div> <span style="color: red" ng-show="pass!=passA">* 保持两次输入的密码一致</span> </p> <a id="login_to" class="btn btn-block btn-success"> <i class="glyphicon glyphicon-log-in"></i> 注 册</a> </form> </div> <div id="foot-div"> </div> <script src="../js/pagesJS/regAcc.js"></script> <script> var app = angular.module("myApp",[]); app.controller("samePass",function($scope){ }) </script> </body>
这里我引入了AngularJS作为辅助表单验证的工具,用来绑定两个密码框,使用户保证两次密码输入的一致,这里不做介绍,在接下来的博客可能会介绍
javascript代码如下:
/* Ajax登录 */ function ajaxLogin(name,id,pass,classes){ var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET", "regAcc.php?user_name=" + name + "&email_address=" + id + "&password=" + pass, false); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { if (xmlhttp.responseText == "1") { removeElem("form1"); document.getElementById("form-reg").innerHTML = "<h3>欢迎你," + name + "</h3><img class='img-responsive img-circle' src='../pic/default.jpg'><div id='backTo'><a href='../index.html'>去登录!</a></div>"; }else{ var login = document.getElementById("login_to"); login.setAttribute("class",classes); login.innerHTML = "<i class='glyphicon glyphicon-log-in'></i> 注 册"; removeElem("warningTip"); var tips = "发生错误,注册失败!"; var form = document.getElementById("form-reg"); form.insertBefore(alertBox(tips,"warning"),form.childNodes[0]); } } }; xmlhttp.send(); }
这里为帐号这一栏绑定一个失去焦点事件:
var user_id = document.getElementById("email_address"); user_id.addEventListener("blur",hasUserName,false); /* Ajax验证用户名是否存在 */ function hasUserName(){ var xmlhttp; var tips = document.getElementById("sameUsername"); var name = document.getElementById("email_address").value; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET", "hasUserName.php?name="+name, false); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { if (xmlhttp.responseText == "1") { tips.style.visibility = ""; tips.style.color = "green"; tips.innerHTML = "* 恭喜你,帐号可以使用!"; }else { tips.style.visibility = ""; tips.style.color = "red"; tips.innerHTML = "* 账号已被占用!" } } }; xmlhttp.send(); }
好了 ,完成以上的几个步骤,试试效果
试着拿刚刚注册的帐号去登录 !
完整代码托管在GitHub: https://github.com/chation/musiconline
ps.整个毕业设计还没做完…
相关文章推荐
- 一个简单的注册登录页面(包括阿里大于的手机验证)html+JS+AJAX+PHP
- 【MVC】会员注册/登录,普通验证,会员名是否注册Ajax验证以及会员邮件验证实现原理
- 利用ajax实现简单的注册验证局部刷新实例
- 简单实现Ajax注册验证
- AJAX学习明灯,简单示例:AJAX+存储过程实现无刷新简单登录验证功能!
- Ajax-HelloWorld(运用AJAX技术实现会员注册登录验证功能)
- 简单实现ajax验证用户是否可以登录
- 利用ajax实现局部刷新(简单的注册验证案例)
- Ajax实现局部刷新和异步处理简单应用(实现简单注册验证)
- 使用JSP Servlet和Ajax实现简单的注册页面的用户名密码验证
- JqueryAjax+php实现简单的注册登录
- 【MVC】会员注册/登录,普通验证,会员名是否注册Ajax验证以及会员邮件验证实现原理
- 【MVC】会员注册/登录,普通验证,会员名是否注册Ajax验证以及会员邮件验证实现原理
- webpy实现简单的登录注册和对应验证
- Vue+Vue Router+Axios+Webpack+Flask+MySQL实现简单的注册、登录验证功能
- 用AJAX实现页面登陆以及注册用户名验证的简单实例
- 【MVC】会员注册/登录,普通验证,会员名是否注册Ajax验证以及会员邮件验证实现原理
- ajax实现简单注册验证
- 利用ajax实现简单的注册验证局部刷新实例
- JQuery遮罩层登录界面实现(AJAX+ASP.NET实现登录验证,源码下载)