下载文档原格式
JSP Ajax 用户登录
使用Ajax技术来实现用户登录，将会提交登录区域数据。
练习使用这种方法来实现用户登录校验。
（1）创建客户端程序，通过有参数请求把客户的用户名和密码发送到服务器，然后根据服务器返回的结果来判断是否登录成功。
其中发送有参数请求的JavaScri
（3）实现页面的登录界面，注意一些标签的id属性的设置不能有错，不然将
（4）实现服务器处理——check.java文件，它是一个Servlet，主要功能是起到一个控制器作用，将调用逻辑处理模块（一个JavaBean）SqlCheck来判断用户是否
（5）实现逻辑处理模块——SqlCheck.java，它是一个JavaBean，主要功能是查
（6）编译并部署各文件，运行效果如图9-15所示：
图9-15 登录成功。
在上一篇博文中已经学习了如何整合mybatis和spring，实现持久层的CRUD操作、业务层的事务管理和spring的IoC。
现在我们这个demo的基础上，继续整合struts2，并利用json插件和jquery实现ajax，完成后系统将实现登录与注册的简单功能。
浏览器端如何简单、高效地与服务器端进行数据交互是web开发者最为关心的内容。
在客户端构造intput表单数据或者拼凑URL参数名称/参数值，然后在服务器端笨拙地用request.getParameter(“参数名称”)获取参数显然已经过时了，在struts2中，只要在action 里定义了input表单名称/URL参数名称对应的String类型属性，并设置getter和setter 方法，struts2在调用action的时候就可以根据参数值自动帮你设置好action中对应的属性值供你使用，这极大地方便了开发者。
但是json更为强大——它可以根据浏览器端上传的符合格式的数据设置action中对象的值，也就是说，struts2自动封装的数据只有一层，而json是无限层。
json给页面参数的传递带来极大的方便，结合jquery来使用，可以轻易地做到页面局部刷新、页面无跳转进行友好的系统异常提示等，其中后者是我觉得最有必要做到的一点，在action中定义一个message变量，把action方法执行的结果或者系统异常信息放到里面以json的方式返回给客户端，客户端根据这个变量的结果来进行下一步的操作或者提示系统异常信息，非常地好用。
json由javascript中的对象和数组构成，基本形式是{key:value}，key为属性名称，value 为属性值，value可以为数字、字符串、数组、对象，value可以为数组和对象是json可以封装无限层数据的关键所在。
至于如何建构和解析json不是本篇博文的详细表述范围，请参考其他资料。
现在就让我们利用struts2作为MVC框架，整合json插件，在浏览器端使用jquery解析和系列化json数据，由此制作一个具有登陆/注册功能的小demo。
Struct2_使⽤Ajax调⽤Action⽅法并返回值⼀、Login.jsp1、<head>引⼊jquery：<script type="text/javascript"src="/ajax/jQuery/jquery-1.7.1.js"></script>2、界⾯控件：⽤户名：<input type="text"id="userName"><input type="button"id="btnAjax"value="Ajax调⽤"/>3、提交ajax请求<script type="text/javascript">$(function() {$("#btnAjax").click(function() {var userName = $("#userName").val().trim();if (userName == '') {alert("⽤户名不能为空");return false;}//login1为Action类命名空间名称；AjaxExecute为Action⽅法名称$.ajax({type : "post",url : '/login1/ajaxExecute',data : {//设置数据源userName : userName,password : "我是密码"},dataType : "json",//设置需要返回的数据类型success : function(d) {alert(d.sayHi);},error : function(d) {alert(d.responseText);}});});});</script>⼆、后台类：LoginActionNoNamespcepackage action;import java.text.SimpleDateFormat;import java.util.Date;import java.util.HashMap;import java.util.Map;import org.apache.struts2.convention.annotation.Action;import space;import org.apache.struts2.convention.annotation.ParentPackage;import org.apache.struts2.convention.annotation.Result;import org.apache.struts2.interceptor.validation.SkipValidation;import freemarker.template.SimpleDate;@ParentPackage("json-default")@Namespace("/login1")public class LoginActionNoNamespce extends SuperActionSupport {private static final long serialVersionUID = 1L;private Map<String, String> dataMap;//会把本类所有getter⽅法序列化成字符串返回给jsp页⾯public Map<String, String> getDataMap() {return dataMap;}public void setDataMap(Map<String, String> dataMap) {this.dataMap = dataMap;}@SkipValidation@Action(value = "ajaxExecute", results = { @Result(type = "json", params = { "root", "dataMap" }) })public String ajaxExecute() throws Exception {this.dataMap = new HashMap<String, String>();// 参数名称必须和jsp的空间名称⼀⼀对应String userName = request.getParameter("userName");String password = request.getParameter("password");dataMap.put("isSuccess", "true");SimpleDateFormat now = new SimpleDateFormat("yyyy年MM⽉dd⽇ HH时mm分ss秒");dataMap.put("sayHi", "Hi:" + userName + " 当前时间为：" + now.format(new Date()) + password);return SUCCESS;}}三、注意事项1. 类注解：@ParentPackage("json-default")，⽐如为json-default，不能为struts-defaultjson-default是继承于structs-default的,见.m2\repository\org\apache\struts\struts2-json-plugin\2.3.16.3\struts2-json-plugin-2.3.16.3.jar\struts-plugin.xml2. Action注解：@Action(value = "ajaxExecute", results = { @Result(type = "json", params = { "root", "dataMap" }) })，这⾥的type必须为json、root是固定值，去掉params节点会返回undefined3. 这⾥的dataMap定义为：private Map<String, String> dataMap;必须要添加getter、setter参数，否则返回null4. JSP页⾯（这⾥可以⽤命名空间，如url : '/login1/ajaxExecute', @ParentPackage("json-default")这样设置就不会报错）5. maven管理，需要引⽤的库<dependencies><dependency><groupId>org.apache.struts</groupId><artifactId>struts2-core</artifactId><version>2.3.16</version><exclusions><exclusion><groupId>org.javassist</groupId><artifactId>javassist</artifactId></exclusion></exclusions></dependency><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>3.1.0</version></dependency><dependency><groupId>org.apache.struts</groupId><artifactId>struts2-convention-plugin</artifactId><version>2.3.16.3</version></dependency><dependency><groupId>org.apache.struts</groupId><artifactId>struts2-json-plugin</artifactId><version>2.3.16.3</version></dependency><dependency><groupId>net.sf.json-lib</groupId><artifactId>json-lib</artifactId><version>2.4</version></dependency></dependencies>。
【摘要】随着银行服务的不断提高，各类的信息量也在不断增大，信息的处理成为管理者的一个庞大负担。
银行信息管理系统可以有效的记录和为管理者提供方便快捷的信息处理，极大减轻管理者的负担。
本文介绍了银行信息管理系统的设计和开发过程，详细阐述了整个应用系统的设计思想，最终达成一个完整的设计方案：本系统采用目前流行的Java语言作为开发语言，使用Eclipse作为开发工具，使用Oracle 11g作为后台数据库，采用B/S结构，采用Spring、Struts2、Hibernate整合框架，并大量使用AJAX技术，这些皆是目前的主流。
【关键词】银行，银行信息，JAVA ，Spring，Struts2，Hibernate，AJAXDesign and Implementation of the BankInformation Management System【Abstract】With the continuous improvement of quality of banking services ,The amount of data of various types of information is also increasing，Information processing become a huge burden on managers.The bank information management system can effectively record these numbers,and it can provide managers with a convenient information processing，and greatly reducee the burden on managers。
This article describes the bank's information management system designd and development processing，which Using Eclipse as a development tool，Using Oracle 11g as the background database，using B / S structure, using Spring, Struts2, Hibernate integration framework，And extensive use of AJAX technology, these are all the current mainstream technology.【Keywords】Bank Information Management System，B/S structer ，java，spring，Struts2，Hibernate，AJAX目录第一章引言 (1)1.1课题来源 (1)1.2国内外现状 (1)1.3研究意义 (1)1.4技术介绍 (1)第二章需求分析 (5)2.1系统定义 (5)2.2系统开发设计思想 (5)2.3功能需求 (5)2.4数据需求 (6)2.5数据需求 (6)2.6非功能性需求 (7)第三章数据库设计 (9)3.1数据库 (9)3.2数据库的选择 (9)3.3数据库设计 (9)第四章系统实现 (14)4.1银行信息管理系统实现 (14)4.2系统登录功能模块 (15)4.3添加计算机设备功能模块 (16)4.4计算机设备维护功能模块 (17)4.5添加文章功能模块 (19)4.6文章维护功能模块 (19)4.7添加用户功能模块 (21)4.8用户管理功能模块 (22)4.9机构设置功能模块 (23)第五章结论 (25)后记 (26)参考文献 (27)附录： (28)第一章引言1.1 课题来源随着中国经济的发展和人们物质生活水平的不断提高，银行服务渐渐成为了人们日常及其工作中不可或缺的部分,并且随着科学技术的不断提高,计算机科学日渐成熟,其强大的功能已为人们深刻认识,它已进入人类社会的各个领域并发挥着越来越重要的作用。
![smart系统-系统功能管理模块设计与开发—毕业设计论文[管理资料]](https://uimg.taocdn.com/62845f1ae009581b6ad9ebb1.webp)
毕业设计(论文)SMART系统—系统功能管理模块设计与开发论文作者姓名：申请学位专业：申请学位类别：指导教师姓名（职称）：论文提交日期：SMART系统—系统功能管理模块设计与开发摘要SMART系统是一个在语言上采用跨平台的JAVA技术、在框架架构上采用流行的MVC架构、在业务架构中采用Spring的IOC思想和ORM技术的一个新型智能在线考试信息管理系统，该系统主要实现了学生在线考试与评估以及教师对学生在线考试信息的管理和维护。
本文设计的系统管理功能模块采用了多用户多角色管理机制，确保不同的用户登录系统后能够操作属于自己权限范围内的功能。
系统功能管理模块主要由用户管理子模块、角色管理子模块、角色设置管理子模块、权限管理子模块、系统菜单管理子模块、日志管理子模块和用户登录验证子模块构成。
通过对系统功能的各种设置，实现对系统各级用户的角色设置和角色分配，限制和记录各级用户在系统中的对信息的功能操作，体现了系统权限设置的灵活性、数据操作的安全性。
关键词：用户；角色；权限；多用户多角色管理SMART System—The Design and Development of Function ManagementModuleAbstractSMART System is a new intelligent information management system of on-line examine. It uses the JA VA technology in language, uses the MVC in framework, and uses the IOC antilogy of Spring and ORM technology in its operation framework. The system mainly implements the on-line examination and evaluation of students, and the teachers management and maintenance of students examination information on-line as well. The system uses multiplex users and roles management mechanism. After the users log on, they can use the functions they owned. The management function module of system includes users management, role management, role setup management, right management, system menu management, log management and the validation of the users’ log on management. Through these configuration of system functions, the system carries out the role intercalation and distribution of the all users, restricts and records the information of all users how they used in the system. These can make the system right configuration flexible, and the data operations security.Key words:the users; the role; right; multiplex users and roles management目录论文总页数：36页1 引言 (3)背景 (3)目的 (3)意义 (3)系统开发的主要技术 (3)系统开发环境 (4)2 系统功能需求和总体设计 (4)B/S构架 (4)系统流程框架设计 (5)系统功能需求分析与设计 (9)登录验证 (9)用户管理 (10)角色管理 (11)角色设置管理 (11)权限设置管理 (12)日志管理 (12)菜单权限控制 (13)3 数据库设计与构架 (13)数据库设计 (13)数据库表设计 (14)用户表 (14)用户控制表 (16)角色表 (16)用户角色表 (17)任务表 (17)角色任务表 (18)日志表 (18)模块表 (18)公共CODE表 (19)试卷日志记录表 (19)数据库数据字典 (20)4 系统模块实现 (20)登录验证 (20)登录流程图 (20)代码实现 (21)用户管理 (22)用户界面 (22)代码实现 (23)角色管理 (24)用户界面 (24)代码实现 (25)角色设置管理 (25)用户界面和流程图 (25)代码实现 (26)权限设置管理 (26)用户界面和流程图 (26)代码实现 (27)日志管理 (28)用户界面 (28)代码实现 (28)菜单权限控制 (29)用户界面和流程图 (29)代码实现 (29)5 结果测试、性能分析 (30)单元测试 (30)系统功能测试 (31)系统菜单权限功能测试 (31)系统功能权限测试 (31)结论 (33)参考文献 (34)致谢 (35)声明 (36)1引言背景随着高新技术的迅猛发展，信息技术广泛应用，将传统的教育产业信息化成为可能。
这几天解决了以前不会的一个技术，利用ajax实现用户登录名验证问题，而且我发现网上很多方法其实都有错误，下面我把它分享一下，希望遇到这种问题的人不至于在纠结。
声明一下，本实例代码可以直接拷贝运行。
首先是数据库方面，我用的mysql数据库，建表语句如下：create table user(id int not null primary key auto_increment,username varchar(20))然后插入两条数据：insert into user(username) values(‘zhangsan’);insert into user(username) values(‘小雷’);然后编写html页面：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>ajax验证</title><script type="text/javascript">var xmlHttp;function createXMLHttp(){if(window.XMLHttpRequest){xmlHttp=new XMLHttpRequest();}else{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}}function checkUsername(){var username=document.getElementById("username").value;createXMLHttp();xmlHttp.onreadystatechange=checkUsernameCallback;xmlHttp.open("post","check.jsp?username="+username);xmlHttp.send(null);document.getElementById("info").innerHTML="正在验证`````";}function checkUsernameCallback(){if(xmlHttp.readyState==4){if(xmlHttp.status==200){var flag=xmlHttp.responseText;if(flag==1){document.getElementById("info").innerHTML="用户已经存在";}else{document.getElementById("info").innerHTML="可以使用";}}}}</script></head><body><form method="post" action=""><div>用户名:<input type="text" id="username" onblur="checkUsername()"/><span id="info"/></span></div></form></body></html>验证页面check.jsp（注意放在一个目录下）我这里为了方便直接用的jsp接受，真实情况下一般用servlet接受并调用模型层来实现数据库访问。
用JAVA编写一个用户登陆界面用户验证通过数据库实现用户登录界面的实现可以分为以下几个步骤：1.用户界面设计2.数据库连接接下来，我们需要连接到数据库以验证用户的登录信息。
可以使用Java中的JDBC来连接数据库。
在连接数据库之前，需要准备好数据库的相关信息，如数据库驱动程序的引入、数据库连接URL、用户名和密码等。
3.用户验证一旦连接成功，我们可以使用SQL查询语句来验证用户的登录信息。
可以编写一个方法，传入用户输入的用户名和密码作为参数，并在数据库中查找是否存在匹配的用户记录。
可以使用PreparedStatement对象来执行SQL查询语句，查询结果将返回一个ResultSet对象。
4.处理验证结果根据查询结果，我们可以判断用户的登录是否成功。
如果有匹配的记录，则表示用户验证通过，可以跳转到下一个界面或执行其他操作。
如果没有匹配的记录，则表示用户验证失败，可以弹出错误提示框或执行其他错误处理逻辑。
5.关闭数据库连接在完成用户验证后，我们需要关闭数据库连接，释放相关资源。
可以在finally块中关闭连接，并通过try-catch-finally语句来确保连接的安全关闭。
以下是一个示例代码，用于实现用户登录界面的功能：```javaimport java.sql.Connection;import java.sql.DriverManager;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;public class UserLoginprivate static final String DB_URL ="jdbc:mysql://localhost:3306/mydatabase"; // 数据库连接URL private static final String DB_USER = "root"; // 数据库用户名public static void main(String[] args)//创建用户界面//用户界面设计略//监听登录按钮点击事件loginButton.setOnAction(event ->String username = usernameTextField.getText(;String password = passwordTextField.getText(;boolean result = validateUser(username, password);if (result)//用户验证通过，跳转到下一个界面或执行其他操作} else//用户验证失败，弹出错误提示框或执行其他错误处理逻辑}});}private static boolean validateUser(String username, String password)Connection conn = null;PreparedStatement stmt = null;ResultSet rs = null;boolean result = false;try//连接数据库conn = DriverManager.getConnection(DB_URL, DB_USER,DB_PASSWORD);//执行查询String sql = "SELECT * FROM users WHERE username = ? AND password = ?";stmt = conn.prepareStatement(sql);stmt.setString(1, username);stmt.setString(2, password);rs = stmt.executeQuery(;//判断查询结果if (rs.next()result = true; // 用户验证通过} elseresult = false; // 用户验证失败}} catch (SQLException e)//异常处理逻辑} finally//关闭连接和释放资源tryif (rs != null)rs.close(;}if (stmt != null)stmt.close(;}if (conn != null)conn.close(;}} catch (SQLException e)//异常处理逻辑}}return result;}```以上代码仅为示例，具体的实现可以根据自己的需求进行调整。
SSH框架下CRUD及验证完整实例(一)一准备工作●目标和工具在学习Java两个月之后,尝试使用学过的东西写一个最简单的页面,实现对一张数据库进行基本的CRUD操作和分页,顺便增加服务端验证和Ajax动态验证以及简单的验证码.使用的工具和环境如下:SSH框架(Struts2.1.6,Spring2.5,Hibernate3.2), Myeclipse8.0, Oracle10g数据库,JS类库prototype.js,json2.js. 数据库连接池使用的是proxool,应用到的jar 包如下图,其中dojo和dwr两个插件是后期添加功能时要用,本实例没有用到,在添加项目Hibernate和Spring支持的时候冲突的架包已经删除.●项目的目录结构源文件的目录结构如左图,其中pass文件夹放的是一些历史文件,和本例无关.项目按照mvc框惯例,分为action, dao, model, service, web五层.jsp文件如右图所示放在了WebRoot/per文件夹下,连同js库文件,其中register.jsp是测试验证码使用的.项目对应的数据库表二开发步骤首先新建web项目crm,依次为项目添加SSH支持,接着用工具或命令在数据库中建立数据表PERSON,4个列ID,NAME,AGE,ADDRESS,其中ID为主键.接着在Myeclipse中打开database 试图,为数据库新建一个连接或者使用已有的连接.接下来可以选择直接在database试图中选中PERSON表使用Hibernate反向工程自动生成实体Dao和映射表,也可以自己编写这些文件,相关代码如下.model层,包名com.person.crm.modelDao层,包名com.person.crm.dao业务层service 包名com.person.crm.service PersonManager.java 业务层接口●web层包名com.person.crm.web一个用于生成验证码的类●action层负责处理用户请求包名com.person.crm.actionPersonAction.properties处理PersonAction中类型转换错误信息PersonAction-add-validation.xml和PersonAction-update-validation.xml。
⼏种常见登录验证的⽅式总结1. Cookie-Session 认证早期互联⽹以 web 为主，客户端是浏览器，所以 Cookie-Session ⽅式最那时候最常⽤的⽅式，直到现在，⼀些 web ⽹站依然⽤这种⽅式做认证。
认证过程⼤致如下：1. ⽤户输⼊⽤户名、密码或者⽤短信验证码⽅式登录系统；2. 服务端验证后，返回⼀个 SessionId [SessionId与⽤户信息进⾏关联，通过SessionId可以得到⽤户信息]，客户端将 SessionID 存到 cookie，下次访问的时候带着SessionID；3. 当客户端再发起请求，⾃动带上 cookie 信息，服务端通过 cookie 获取 Session 信息进⾏校验，判断对应⽤户是否存在；弊端只能在 web 场景下使⽤，如果是 APP 中，不能使⽤ cookie 的情况下就不能⽤了；即使能在 web 场景下使⽤，也要考虑跨域问题，因为 cookie 不能跨域；cookie 存在 CSRF（跨站请求伪造[前后端分离的项⽬]）的风险；如果是分布式服务做了集群，第⼀次登录请求访问的是A服务，第⼆请求来到了B服务，B服务就没有第⼀次请求访问登录得到的Session Id. 此时还需要考虑 Session 同步问题；2. 基于 Cookie-Session 的改造认证由于传统的 Cookie-Session 认证存在诸多问题，可以把上⾯的⽅案改造⼀下。
改动的地⽅如下：1. 不⽤ cookie 做客户端存储，改⽤其他⽅式，web 场景下让前端使⽤ local storage（局部存储器。
它是html5新增的⼀个本地存储API），APP 中使⽤客户端数据库，这样就实现了跨域，并且避免了 CSRF ;2. 服务端也不存 Session 了，把 Session 信息拿出来存到 Redis 等内存数据库中，这样即提⾼了速度，⼜避免了 Session 同步问题；经过改造之后变成了如下的认证过程：1. ⽤户输⼊⽤户名、密码或者⽤短信验证码⽅式登录系统；2. 服务端经过验证，将认证信息构造好的数据结构存储到 Redis 中，并将 key 值返回给客户端；3. 客户端拿到返回的 key，存储到 local storage 或本地数据库；4. 下次客户端再次请求，把 key 值附加到 header 或者请求体中；5. 服务端根据获取的 key，到 Redis 中获取查询相关value得到认证信息；弊端：1. 可能存在单点故障的问题，redis宕机后，全部⽤户都得重新登录。
struts2注解⽅式的验证struts2的验证分为分编程式验证、声明式验证、注解式验证。
因现在的⼈越来越懒，都追求零配置，所以本⽂介绍下注解式验证。
⼀.hello world参考javaeye的这篇⽂章，按着做⼀次，起码有个初步印象Validation使⽤名字叫做validator的Intercepter，在默认情况下，struts2已经定义了这个Intercepter，我们在不加声明的情况下就可以使⽤Validation了如果是使⽤默认的拦截器，就已经开启了验证框架的了，直接⽤。
开启验证的⽅式是（官⽹）：打开验证默认拦截器堆栈“defaultStack”已经打开验证。
在创建⾃⼰的拦截器堆栈⼀定要包括两对validation和workflow拦截器。
来⾃struts-default.xml：<interceptor-stack name="defaultStack">...<interceptor-ref name="validation"><param name="excludeMethods">input,back,cancel,browse</param></interceptor-ref><interceptor-ref name="workflow"><param name="excludeMethods">input,back,cancel,browse</param></interceptor-ref></interceptor-stack>从版本2.0.4开始，Struts为XWork的com.opensymphony.xwork2.validator.ValidationInterceptor拦截器提供了扩展。
前端开发中的登录认证与权限控制技术随着互联网的快速发展，用户数据安全和隐私保护已经成为前端开发中的一项重要任务。
登录认证和权限控制技术作为核心的安全机制，被广泛应用于各种Web应用程序和网站。
本文将介绍前端开发中常见的登录认证与权限控制技术，并讨论它们的优势和不足之处。
一、登录认证技术1. 用户名和密码用户名和密码是最常见的登录认证方式，用户通过提供正确的用户名和密码来验证身份。
前端开发中通常使用表单来收集用户输入的用户名和密码，然后将其发送给后端服务器进行验证。
然而，安全性是该方法的一个主要问题，因为用户名和密码可能会被拦截或遭受暴力破解。
为了增加安全性，前端开发者可以使用加密算法对密码进行加密，例如使用MD5或SHA加密算法。
2. 第三方登录第三方登录是指用户使用其在其他网站或应用程序注册的账户登录目标网站。
通过第三方登录机制，用户无需创建额外的账户，可以直接使用已有的社交媒体或其他第三方账户登录。
对于前端开发者来说，使用第三方登录可以方便用户登录，并减少因为密码管理而带来的安全隐患。
然而，具体实现过程中需要与第三方平台进行集成，涉及到复杂的OAuth或OpenID协议。
3. 扫码登录扫码登录是近年来兴起的一种登录认证方式。
用户通过手机扫描登录页面上的二维码，手机上的登录客户端会向服务端发送用户的身份信息，服务端进行验证后即可完成登录。
扫码登录不仅方便了用户，也减少了密码管理的繁琐。
然而，该方法需要前端和后端的配合，涉及到二维码的生成和解析，同时用户需要手机等设备来进行登录操作。
二、权限控制技术1. 角色权限角色权限是一种常见的权限控制方式，它将用户分配到不同的角色上，每个角色具有不同的权限。
前端开发者可以通过在代码中进行角色权限的判断，来限制用户对特定区域或功能的访问权限。
通过角色权限控制，可以灵活地管理不同用户的权限，实现精确的权限配置。
然而，该方法需要前端和后端的配合，同时需要仔细设计和管理角色的层次结构。
验证码——实现前端验证码验证（后端登陆注册功能） 点开这个页⾯⾸先恭喜你！——可以学到⼀个⾮常简单的在⽤户登陆注册的时候⽤前端实现的验证码验证的功能. 我的项⽬框架为SSM框架，⽤户的登陆注册以及⽤户信息的增删改查等等其他的功能时通过java后端技术实现的，对于验证码功能只需要在login.html添加部分代码即可实现。
⽹上的我也搜过查看了好多，但是都是⾮常繁琐，有前后端分离的、接⼝调⽤的、添加⼯具类的，⽆论是什么⽅法他们都有⼀个共同的特点——代码冗长繁琐，其次就是和⾃⼰所要⽤的⽅法出⼊太⼤，借鉴起来很⿇烦，看了半天⽤处不是多⼤，所以在此我总结了下，给⼤家展⽰⼀个简单的⽅法去实现验证码验证的功能，希望对⼤家有所帮助！话不多说，上代码！没错,就这么的简单.在scripts⽣成验证码设为全局变量显⽰在⼀个input标签上,⾸先不考虑登录信息是否有误,只有验证码通过的情况下才会进⾏表单的提交,在判断登录信息的正确与否.代码如下，需要的直接拷贝<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html><head><title>login</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script src="/myfirstssm/js/jquery-1.11.3.min.js"></script><style type="text/css">#code {font-family: Arial;font-style: italic;font-weight: bold;border: 0;letter-spacing: 2px;color: blue;}</style><script>//产⽣验证码window.onload = function() {createCode();var timeDiv = document.getElementById("time");window.setInterval(function(){timeDiv.innerHTML = new Date().toLocaleString();}, 1000);};var code; //在全局定义验证码function createCode() {code = "";var codeLength = 4; //验证码的长度var checkCode = document.getElementById("code");var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R','S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //随机数for(var i = 0; i < codeLength; i++) { //循环操作var index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）code += random[index]; //根据索引取得随机数加到code上}checkCode.value = code; //把code值赋给验证码}function check(){var inputCode = document.getElementById("ctl00_txtcode").value.toUpperCase();var username = $("#username").val();var password = $("#password").val();if(username=="" || password==""||inputCode==""){alert("输⼊信息不能为空,请完善信息！");return false;}else if(inputCode!=code){alert("验证码输⼊错误,请重新输⼊！");createCode(); //刷新验证码document.getElementById("ctl00_txtcode").value = ""; //清空⽂本框return false;}return true;}</script></head><body><br/><br/><br/><br/><br/><div id="wrap"><div id="top_centent" ><div id="header"><!-- style="color:DodgerBlue;" --><div id="leftheader" ></div><div id="topheader" ><h1 id="title" style="text-align:center;" ><a href="#" style="text-decoration: none;color:black">管理员</a></h1></div><div id="navigation"></div><CENTER><font color="red"><!-- <span id="message">${@}</span> --></font></CENTER></div><div id="content"><form action="/myfirstssm/jsp/login.action" method="post" onsubmit="return check()"><table cellpadding="0" cellspacing="20" border="0"class="form_table" align="center"><tr><td valign="middle" align="right">⽤ 户 名:</td><td valign="middle" align="left"><input type="text" name="username" id="username" /></td></tr><tr><td valign="middle" align="right">密 码:</td><td valign="middle" align="left"><input type="password" name="password" id="password" /></td></tr><tr><td valign="middle" align="right">验 证 码:</td><td valign="middle" align="left"><input type="text" id="ctl00_txtcode" /></td><td valign="middle"><input type="button" id="code" onclick="changeImg()"/></td></table><p style="text-align:center"><input type="submit"class="button" value="登陆" /><input type="button"class="button" value="注册"onclick="location='/myfirstssm/jsp/register.html'" /><input type="reset" name="reset" value="重置"/></p></form></div></div><form action="/myfirstssm/jsp/finduser.action" method="post" ><P style="text-align:center;"><input type="submit"class="button" value="⽤户信息" /></P></form><div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><div style="text-align:left">Copyright © 2019⾬如烟</div><div id="time" style="text-align:right"></div></div></div></body></html>认真看过此篇的⼩伙伴，如果对你有收获，请点击旁边的⼩⼿推荐⼀下，如果有误，欢迎指正，谢谢！版权声明：此篇为本⼈原创，转载请标明出处：https:///YQian/p/11323443.html我的博客园地址：https:///YQian/。
Author：zhenghuiLogin.jsp<%@page language="java"import="java.util.*"pageEncoding="utf-8"%> <%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.get ServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>struts中使用ajax技術</title><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><link rel="stylesheet"type="text/css"href="css/style.css"><script type="text/javascript">function trim(str){ //删除左右两端的空格return str.replace(/(^\s*)|(\s*$)/g, "");}</script><script type="text/javascript">function ajaxLogin(){var xmlhttp;var text;var username=document.getElementById("username").value;var password=document.getElementById("password").value;//检测是否为空可以将其交给前台处理;if(username.length==0){alert("用户名不能为空");return false;}else if(password.length==0){alert("密码不能为空");return false;}if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){text=xmlhttp.responseText;if(trim(text)=="success"){alert("登陆成功!");window.location.href="home.jsp";}else{alert("登录失败，请重新登陆");}}}xmlhttp.open("POST","UserAction_ajaxLogin.action?ername="+ username+"&user.password="+password,true);xmlhttp.send();}</script></head><body><form name="form"><input type="text"id="username"name="ername"/><input type="password"id="password"name="user.password"/><input id="submit"type="submit"value="submit"onclick="ajaxLogin()"/></form></body></html>User.javapackage blog.model;public class User {private int id;private String username;private String password;public void setId(int id) {this.id = id;}public int getId() {return id;}public void setPassword(String password) { this.password = password;}public String getPassword() {return password;}public void setUsername(String username) { ername = username;}public String getUsername() {return username;}}UserAction.javapackage blog.action;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession;import org.apache.struts2.ServletActionContext;import er;import erService;import com.opensymphony.xwork2.ActionSupport;@SuppressWarnings("serial")public class UserAction extends ActionSupport {private UserService userService = new UserService();private User user;@Overridepublic String execute() throws Exception {// TODO Auto-generated method stubreturn super.execute();}public String ajaxLogin() throws Exception {try {String responseText = null;//logincheck(User user)根据传入的user，查询是否已经存在返回boolean;if (userService.logincheck(user)) {//以下隔开的是登陆的同时将登陆者的信息放进session里面;///////////////////////////////////////////////////////////////////getUserbyName(String username),根据传入的名字查询该对象出来user = userService.getUserbyName(user.getUsername());HttpSession httpSession = ServletActionContext.getRequest()s.getSession();System.out.println(user.getUsername()+ user.getPrivilege().getId());httpSession.setAttribute("username",user.getUsername());httpSession.setAttribute("privilege_id",user.getPrivilege().getId());httpSession.setAttribute("user_id", user.getId());///////////////////////////////////////////////////////////////// responseText = "success";} else {System.out.println("fail");responseText = "fail";}// 取得当前原始的PrintWriter对象,以便于直接输出响应结果,而不用跳转到某个视图;HttpServletResponse response = ServletActionContext.getResponse();response.setCharacterEncoding("utf-8");response.setContentType("text/plain");PrintWriter out = response.getWriter();out.println(responseText);out.flush();out.close();} catch (IOException e) {e.printStackTrace();}return null;}public User getUser() {return user;}public void setUser(User user) {er = user;}}Struts.xml<?xml version="1.0"encoding="UTF-8"?><!DOCTYPE struts PUBLIC"-//Apache Software Foundation//DTD Struts Configuration 2.1//EN""/dtds/struts-2.1.dtd"><struts><package name="action"extends="struts-default"><action name="*_*"class="blog.action.{1}"method="{2}"> <result></result></action></package></struts>仅供参考，仅供参考。
