实现带有验证码的ajax局部刷新登录界面

超、凢脫俗 2022-08-21 12:40 125阅读 0赞

现在的登录界面大多数都带有：验证码的功能+验证码局部刷新+ajax登录。用ajax登录的好处最明显就是速度快，URL地址没有变化。所有现在登录功能很少再用form表单post提交了，大多数都已经采用了ajax局部访问后台然后解析返回值并显示结果到界面上面。理论还是要拿来实践才能验证的，下面直接上代码。

想学习**分布式、微服务、JVM、多线程、架构、java、python**的童鞋，千万**不要**扫码，否则后果自负~

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoaXFpYW5nMDMxNg_size_16_color_FFFFFF_t_70][]

运行界面：

![Center][]

**1.验证码后台访问部分上一篇博客已经介绍多了，这里介绍如何利用img中src实现局部刷新验证码的功能。**

html部分：

js部分：

这部分最重要的就是 $("\#codePic").attr("src","http://127.0.0.1:8888/TP/codePic?flag="+Math.random()); 这部分的代码。如果不加flag="+Math.random()是实现不了局部刷新的功能的。因为src中如果每次访问的地址一样的话就会发生不更新的情况。具体为什么会发生这种情况大家可以自己去研究。而codePic其实是一个action。这个action的功能是利用java画笔画出验证码并打包成图片返回给img中的src。

**2.利用bootstrap中的modal实现对话框的功能。因为登录提交前需要验证用户名或密码是否为空等判断，如果出现错误就需要弹出对话框提示用户。这里验证部分用js实现，对话框部分用bootstrap的modal实现。**

html对话框部分：

<div class="modal" id="mymodal" tabindex="-1">
        <div class="modal-dialog">
        	<div class="modal-content">
    			<div class="modal-header">
    				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
    				<h4 class="modal-title">亲，您好</h4>
    			</div>
    			<div class="modal-body" id="dialogs">
    				<p></p>
    			</div>
    			<div class="modal-footer">
    				<button type="button" data-dismiss="modal" style="color: #FFFFFF;background-color:#FB8F02; text-align:center;
                	  padding:10px;border: 1px solid #dedede;-moz-border-radius: 15px;-webkit-border-radius: 15px;  border-radius:15px;vertical-align:middle;">我知道了
                	</button>
    			</div>
    		</div>
    	</div>
    </div>

js验证部分：

需要导入的css、js文件：

这里需要注意的就是导入的CSS，js文件是否正确。

**3.利用ajax实现登录功能**

html部分：

js部分：

这里location.href="http://127.0.0.1:8888/TP/main.jsp"作用相当于重定向。我的ajax不是原生的js中的ajax而是JQuery封装好的ajax。大家可以去搜一搜 JQuery中$.post（）请求。

**login.jsp全部代码：**

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>无标题文档</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/global.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src='js/jquery-1.9.1.js'></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
    	<div class="modal" id="mymodal" tabindex="-1">
        <div class="modal-dialog">
        	<div class="modal-content">
    			<div class="modal-header">
    				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
    				<h4 class="modal-title">亲，您好</h4>
    			</div>
    			<div class="modal-body" id="dialogs">
    				<p></p>
    			</div>
    			<div class="modal-footer">
    				<button type="button" data-dismiss="modal" style="color: #FFFFFF;background-color:#FB8F02; text-align:center;
                	  padding:10px;border: 1px solid #dedede;-moz-border-radius: 15px;-webkit-border-radius: 15px;  border-radius:15px;vertical-align:middle;">我知道了
                	</button>
    			</div>
    		</div>
    	</div>
    </div>
    
    
    
    	<div class="logincontainer">
       	  <div class="logintitle">大学二手交易平台管理系统</div>
       	  <div class="loginbg">
           	<div class="loginfmbg">
            	<div class="sysname">BBW综合管理系统</div>
                <div class="loginfm">   
               	  <p><label class="lbright">用户名：</label>
                  	 <span class="spinput"><input type="text" name="usersName" id="username"/></span>
                  </p>
                  <p><label class="lbright">密  码：</label>
                     <span class="spinput"><input type="password" name="password" id="password"/></span></p>
                  <p><label class="lbright">验证码：</label>
                   <span>
                     	<input type="text" name="validcode" style="width:70px; vertical-align:middle;" id="validcode"/>
                     	<img id="codePic" src="http://127.0.0.1:8888/TP/codePic" width="60" height="21" style="vertical-align:middle;cursor:pointer;"/>                 
                     </span>               
                     <a class="blurry" id="newPic" onclick="getPic();">看不清楚，换一张</a>
                  </p>              
                </div>
                <div class="submitcon">
                	<input type="button" value="登 录" style="height:45px;width:130px;margin-top:15px;color: #FFFFFF;background-color:#FB8F02;font-size: 20px;
                	  padding:5px;border: 3px solid #dedede;-moz-border-radius: 15px;-webkit-border-radius: 15px;  border-radius:15px;vertical-align:middle;text-align:center;" onclick="login();"/>         
                </div>
            </div>
       	  </div>
          <div class="copyright">Copyright 2015-2016 林志强 版权所有 </div>
    	</div>
    </body>
      <script type="text/javascript">
             function getPic(){ 
                 $("#codePic").attr("src","http://127.0.0.1:8888/TP/codePic?flag="+Math.random()); 
             };
            function dialog(){ 
         		$("#mymodal").modal("toggle");
       		};
         function login(){  
          var userName=document.getElementById("username").value;  
          var pwd=document.getElementById("password").value;  
          var validcode=document.getElementById("validcode").value;  
          var matchResult=true;  
          if(userName==""){  
                document.getElementById("dialogs").innerHTML="<h3>用户账号不能为空！</h3>";
          		dialog();
                matchResult=false;  
          }else if(pwd==""){  
                document.getElementById("dialogs").innerHTML="<h3>用户密码不能为空！</h3>";
          		dialog();
                matchResult=false;  
          }else if(validcode==""){  
                document.getElementById("dialogs").innerHTML="<h3>验证码不能为空！</h3>";
          		dialog();
                matchResult=false;  
          }else if(userName.length<6||userName.length>20){  
                document.getElementById("dialogs").innerHTML="<h3>用户名长度应在6到20个字符之间！</h3>";
                dialog();
                matchResult=false;  
          }else if(pwd.length<6||pwd.length>20){  
                document.getElementById("dialogs").innerHTML="<h3>密码或重复密码长度应在6到20个字符之间！</h3>";
                dialog();
                matchResult=false;  
          }  
          if(matchResult==true){
          	  $.post("http://127.0.0.1:8888/TP/usersAction?method=login", {usersName:userName,password:pwd, validcode:validcode},function(data,status){
          	 	 var error=data.error;
          	 	 var result=data.result;  
          	 	 getPic();
      	     if(error=="error"){
      	         errors="true";
      	     	 document.getElementById("dialogs").innerHTML="<h3>验证码错误，请重新输入！</h3>";
          		 dialog();
      	     }
      	     if(result=="0"){
      	     	 document.getElementById("dialogs").innerHTML="<h3>您输入的用户名不存在！</h3>";
      	     	  document.getElementById("username").value="";
          		 dialog();
      	     }else if(result=="1"){
      	     	 document.getElementById("dialogs").innerHTML="<h3>您输入的密码错误，请重新输入！</h3>";
      	     	 document.getElementById("password").value="";
          		 dialog();
      	     }else if(result=="2"){
      	     	document.getElementById("dialogs").innerHTML="<h3>您的管理员权限不够！</h3>";
          		 dialog();
      	     }else if(result=="3"){
      	     	location.href="http://127.0.0.1:8888/TP/main.jsp";
      	     }	   
            },"json");
          }  
         };
    </script>
    </html>

**到这里全部的功能就介绍完了。Demo下载：[点击打开链接][Link 1]**

**如果有什么不清楚或者有啥疑问意见可以加我QQ 208017534 ，欢迎一起交流一起进步。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoaXFpYW5nMDMxNg_size_16_color_FFFFFF_t_70]: /images/20220724/53f2b249c62e4c768cdc8e0407eb8524.png
[Center]: /images/20220724/3b201f9fe1614889a46df8f2b1255503.png
[Link 1]: http://download.csdn.net/detail/linzhiqiang0316/9507643