很多登录界面都有验证码功能ajax局部刷新效果，接下来通过本文给大家分享ajax实现带有验证码的局部刷新登录界面，对ajax感兴趣的朋友一起看看吧

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

运行界面：

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

html部分：

验证码：validcode" style="width:70px; vertical-align:middle;" id="validcode"/>  看不清楚，换一张

js部分：

<ｓｃｒｉｐｔ type="text/javascript">function getPic(){ $("#codePic").attr("src","http://127.0.0.1:8888/TP/codePic?flag="+Math.random()); };

这部分最重要的就是 $("#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对话框部分：

×Close
亲，您好
我知道了

js验证部分：

<ｓｃｒｉｐｔ type="text/javascript">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="
用户账号不能为空！
";dialog();matchResult=false; }else if(pwd==""){ document.getElementById("dialogs").innerHTML="
用户密码不能为空！
";dialog();matchResult=false; }else if(validcode==""){ document.getElementById("dialogs").innerHTML="
验证码不能为空！
";dialog();matchResult=false; }else if(userName.length<6||userName.length>20){ document.getElementById("dialogs").innerHTML="
用户名长度应在6到20个字符之间！
";dialog();matchResult=false; }else if(pwd.length<6||pwd.length>20){ document.getElementById("dialogs").innerHTML="
密码或重复密码长度应在6到20个字符之间！
";dialog();matchResult=false; } };

需要导入的css、js文件：

<ｓｃｒｉｐｔ src='js/jquery-1.9.1.js'><ｓｃｒｉｐｔ src="js/jquery.min.js"><ｓｃｒｉｐｔ src="js/jquery.js"><ｓｃｒｉｐｔ src="js/bootstrap.min.js">

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

3.利用ajax实现登录功能

html部分：

js部分：

<ｓｃｒｉｐｔ type="text/javascript">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="
用户账号不能为空！
";dialog();matchResult=false; }else if(pwd==""){ document.getElementById("dialogs").innerHTML="
用户密码不能为空！
";dialog();matchResult=false; }else if(validcode==""){ document.getElementById("dialogs").innerHTML="
验证码不能为空！
";dialog();matchResult=false; }else if(userName.length<6||userName.length>20){ document.getElementById("dialogs").innerHTML="
用户名长度应在6到20个字符之间！
";dialog();matchResult=false; }else if(pwd.length<6||pwd.length>20){ document.getElementById("dialogs").innerHTML="
密码或重复密码长度应在6到20个字符之间！
";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="
验证码错误，请重新输入！
";dialog();}if(result=="0"){document.getElementById("dialogs").innerHTML="
您输入的用户名不存在！
";document.getElementById("username").value="";dialog();}else if(result=="1"){document.getElementById("dialogs").innerHTML="
您输入的密码错误，请重新输入！
";document.getElementById("password").value="";dialog();}else if(result=="2"){document.getElementById("dialogs").innerHTML="
您的管理员权限不够！
";dialog();}else if(result=="3"){location.href="http://127.0.0.1:8888/TP/main.jsp";} },"json");} };

这里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"%><ｓｃｒｉｐｔ src='js/jquery-1.9.1.js'><ｓｃｒｉｐｔ src="js/jquery.min.js"><ｓｃｒｉｐｔ src="js/jquery.js"><ｓｃｒｉｐｔ src="js/bootstrap.min.js">
×Close
亲，您好
我知道了
大学二手交易平台管理系统
BBW综合管理系统
 
用户名：
密 码：
验证码：  看不清楚，换一张
 
 
Copyright 2015-2016 林志强 版权所有