struts2+json+jquery实现ajax登录和注册功能
在上一篇博文中已经学习了如何整合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。
本demo中的数据持久层的实现用到了mybatis3和spring3，请参考本人的上一篇博文。
首先我们需要在eclipse中新建一个web工程，并把以下jar包拷贝到工程WEB-INF/lib 下：aopalliance-1.0.jarasm-3.3.1.jarasm-commons-3.3.jarasm-tree-3.3.jaraspectjweaver.jarcglib-2.2.2.jarcommons-dbcp-1.2.1.jarcommons-fileupload-1.2.2.jarcommons-io-2.0.1.jarcommons-lang3-3.1.jarcommons-logging-1.1.1.jarcommons-pool.jarfreemarker-2.3.19.jarjavassist-3.11.0.GA.jarlog4j-1.2.16.jarmybatis-3.0.6.jarmybatis-spring.jarmysql-connector-java-5.1.22-bin.jarognl-3.0.5.jarorg.springframework.aop-3.0.6.RELEASE.jarorg.springframework.asm-3.0.6.RELEASE.jar org.springframework.aspects-3.0.6.RELEASE.jar org.springframework.beans-3.0.6.RELEASE.jar org.springframework.context-3.0.6.RELEASE.jar org.springframework.core-3.0.6.RELEASE.jar org.springframework.expression-3.0.6.RELEASE.jar org.springframework.jdbc-3.0.6.RELEASE.jar org.springframework.transaction-3.0.6.RELEASE.jar slf4j-api-1.6.1.jarslf4j-log4j12-1.6.1.jarstruts2-core-2.3.4.1.jarxwork-core-2.3.4.1.jarstruts2-spring-plugin-2.3.4.1.jarorg.springframework.web.struts-3.0.6.RELEASE.jarorg.springframework.web-3.0.6.RELEASE.jarcommons-beanutils-1.8.0.jarcommons-collections-3.2.1.jarezmorph-1.0.6.jarjson-lib-2.4-jdk15.jarstruts2-json-plugin-2.3.4.1.jar其中包含了Mybatis3.0.6、Spring3.0.6和Struts2.3.4单独工作或者相互整合所依赖的jar 包，本文需要关注的是struts2的json插件struts2-json-plugin-2.3.4.1.jar，还有json-lib 相关的jar：json-lib-2.4-jdk15.jarezmorph-1.0.6.jarcommons-beanutils-1.8.0.jarcommons-collections-3.2.1.jar如果没有加入这些包，初始化action时很可能会报：ERROR 11-22 17:16:35 Unable to find parent packages json-default或者类似的错误我们来看看工程的整体构建情况，下图是工程在eclipse中的目录结构：我们逐一来看看这些目录或者包中都有些什么。
config目录下，applicationContext.xml是spring的配置文件，log4j.xml是log4j的配置文件，struts.xml是struts的配置文件，遵从分模块配置的规则，我把本demo用到的struts 配置放到了struts-login.xml中。
com.ribbonchen.action包中定义了两个action，BaseAction继承于struts2的ActionSupport，为了获取request、response、session对象，它还实现了ServletRequestAware,ServletResponseAware,SessionAware接口，工程中其他的action都将继承于BaseAction；UserAction里定义了用户登录和注册要用到的相关方法。
下面说的都是数据持久层里面的东西，具体代码MySQL的建表sql这里我就不贴了，请参见我上一篇博文。
com.ribbonchen.dao里定义了数据访问层的相关接口和类和mybatis用到的映射文件。
com.ribbonchen.service里定义了业务层的相关接口和类。
com.ribbonchen.entity里定义了用户实体类UserEntity。
ServiceFactory是没用到spring注入service到Action里时用到的工厂方法，请无视它，嘿嘿。
好了，我们来看代码，注释我都写在代码里面了。
首先来配置web工程初始化的入口，web.xml：<?xml version="1.0"encoding="UTF-8"?><web-app id="WebApp_9"version="2.4"xmlns="/xml/ns/j2ee"xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/xml/ns/j2ee/xml/ns/j2ee/web-app_2_4.xsd"><display-name>MSS</display-name><!-- 初始化spring --><context-param><param-name>contextConfigLocation</param-name><param-value>classpath:applicationContext.xml</param-value></context-param><!-- 配置spring监听器 --><listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener><!—初始化struts--><filter><filter-name>struts2</filter-name><filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class></filter><filter-mapping><filter-name>struts2</filter-name><url-pattern>/*</url-pattern></filter-mapping><welcome-file-list><welcome-file>login.jsp</welcome-file></welcome-file-list></web-app>Spring的配置文件applicationContext.xml:xmlns:aop="/schema/aop"xmlns:tx="/schema/tx"xsi:schemaLocation="/schema/beans/schema/beans/spring-beans-3.0.xsd/schema/context/schema/context/spring-context-3.0.xsd/schema/tx/schema/tx/spring-tx-3.0.xsd/schema/aop/schema/aop/spring-aop-3.0.xsd"><!-- --><context:annotation-config/><context:component-scan base-package="com.ribbonchen.*"/><!-- jdbc.propertis Directory --><!-- beanclass="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer"><property name="locations" value="classpath:jdbc.properties" /> </bean--><bean id="MyDataSource"destroy-method="close"class="mons.dbcp.BasicDataSource"><property name="driverClassName"value="com.mysql.jdbc.Driver"/><property name="url"value="jdbc:mysql://localhost:3306/mybatis?useUnicode=true&characterEncoding=UTF-8"/> <property name="username"value="root"/><property name="password"value="123456"/></bean><!-- SqlSessionFactory --><bean id="sqlSessionFactory"class="org.mybatis.spring.SqlSessionFactoryBean"> <property name="dataSource"ref="MyDataSource"/></bean><!-- ScanMapperFiles --><bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"><property name="basePackage"value="com.ribbonchen.dao.mapper"/> </bean><!--================================事务相关控制=================================================--><bean name="transactionManager"class="org.springframework.jdbc.datasource.DataSourceTransactionManager"><property name="dataSource"ref="MyDataSource"></property> </bean><tx:advice id="userTxAdvice"transaction-manager="transactionManager"> <tx:attributes><tx:method name="delete*"propagation="REQUIRED"read-only="false"rollback-for="ng.Exception"no-rollback-for="ng.RuntimeException"/><tx:method name="insert*"propagation="REQUIRED"read-only="false"rollback-for="ng.RuntimeException"/><tx:method name="update*"propagation="REQUIRED"read-only="false"rollback-for="ng.Exception"/><tx:method name="find*"propagation="SUPPORTS"/><tx:method name="get*"propagation="SUPPORTS"/><tx:method name="select*"propagation="SUPPORTS"/><tx:method name="add*"propagation="REQUIRED"read-only="false"rollback-for="ng.RuntimeException"/><tx:method name="delete*"propagation="REQUIRED"read-only="false"rollback-for="ng.Exception"no-rollback-for="ng.RuntimeException"/><tx:method name="del*"propagation="REQUIRED"read-only="false"rollback-for="ng.Exception"no-rollback-for="ng.RuntimeException"/></tx:attributes></tx:advice><aop:config><!--把事务控制在Service层--><aop:pointcut id="pc"expression="execution(public * com.ribbonchen.service.*.*(..))"/> <aop:advisor pointcut-ref="pc"advice-ref="userTxAdvice"/> </aop:config><!-- 以下为自定义Bean--><!-- 初始化userDao --><bean id="userDao"class="erDaoImpl"Log4j.xml参见我上一遍博文，是一样的，呵呵。
Struts2+Jquery实现ajax并返回json类型数据
Struts2+Jquery实现ajax并返回json类型数据
摘要：主要实现步骤如下： 1、JSP页面使用脚本代码执行ajax请求 2、Action中查询出需要返回的数据，并转换为json类型模式数据 3、配置struts.xml文件 4、页面脚本接受并处理数据
网上看到很多关于Struts2+ajax+jquery+json的例子，但是很多都不完整，也看不明白，主要原因是返回jsno类型数据和原来的返回字符串类型数据不一样，并且网友们实现步骤没有说清楚，让初学的朋友捉摸不透到底该怎么做。
我做了个简单的demo，供网友们学习，最后我会附上链接，可以下载整个demo.
首先需要的包（struts核心包和json需要的包）：
struts核心包：
json需要的包：
commons-logging-*.jar在导入struts核心包的时候就导入了，所以导入json包的时候可以去掉这个包
页面效果：
这样就可以完成一个简单json数据类型传递的demo了。
下面附上源码文件（百度网盘），基于eclipse开发，导入即可运行：/share/link?shareid=2994183962&uk=1646424500。
【IT专家】使用struts2+Ajax+jquery验证用户名是否已被注册
本文由我司收集整编，推荐下载，如有疑问，请与我司联系使用struts2+Ajax+jquery 验证用户名是否已被注册推荐阅读：JQuery+Ajax+Struts2+Hibernate 框架整合实现完整的登录注册在用户模块中的用户注册需求上,通常要进行用户名是否已被注册的验证,今天正好写了这个需求,把详细代码和所遇到的问题贴过来.在使用struts2+ajax 时候,通常我们会返回json 类型的数据,但是像上面的例子,我们只希望返回一个1 和0 有助于进行后续判断即可,没必要返回json 类型,返回一个text 字符串就可以了.regist.jsp(这里只提供script 部分):这里我是用了Jquery.post(url,args,function(data){..})函数提交ajax 请求到指定url，并且携带参数args，最后用一个回调函数处理请求返回结果data.UserAction:注意:这里我用的是ModelDriven 的方式获取表单数据,而在使用ajax 的时候,直接传了一个userNiName(昵称)过来,于是我在UserAction 中加了一个私有字符串变量userNiName,并设置了set 方法.结果死活传不过值来,传过来的是一个null,于是我将私有变量删掉,然后直接用user.getUserNiName()直接获取就得到了.切记.UserService(省略).User 类(省略).UserDao:注意在result 标签中,type=“stream”.最后顺带说一句,我在调试的时候习惯使用输出语句,但每次加一句输出语句都需要重启Tomcat,好烦.于是参考网上的方式,将Tmocat 安装目录下,conf- server.xml 中在host 标签下添加了以下代码,就可以修改类(细微的修改)的时候,不需要重启服务器了:需要特别注意的是,当在Tomcat 中卸载了该项目后,一定要回来将这个标签删除.使用struts2+Ajax+jquery 验证用户名是否已被注册的知识，小编就给大家介绍这么多，希望对大家有所帮助！。
struts2实现注册及登录
struts2实现注册及登录zhuce.jsp<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><form name="register" action="/struts2/UserRegister" method="post"><table border="2" align="center"><caption>新⽤户注册</caption><tr><th>⽤户名：</th><td><input name="username" id="username" type="text" /></td></tr><tr><th>密码：</th><td><input name="password" id="password" type="password" /></td></tr><tr><td colspan="2" align="center"><input type="submit" value="提交"width="120ppx" /></td></tr></table></form></body></html>denglu.jsp<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><form name="register" action="/struts2/UserLogin" method="post"><table border="2" align="center"><caption>⽤户登录</caption><tr><th>⽤户名：</th><td><input name="username" id="username" type="text" /></td></tr><tr><td colspan="2" align="center"><input type="submit" value="提交"width="120ppx" /></td></tr></table></form></body></html>UserAction.javapackage com.amos.web.action;import com.opensymphony.xwork2.ActionSupport;/*** @ClassName: UserAction* @Description: ⽤户管理，将相关的action封装到⼀个类中* @author: amosli* @email:amosli@* @date Jan 8, 2014 1:06:00 AM*/public class UserAction extends ActionSupport {private static final long serialVersionUID = -6275534406709255984L;private String username;private String password;public String getUsername() {return username;}public void setUsername(String username) {ername = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}// ⽤户注册public String register() throws Exception {return "toRegisterJsp";}// ⽤户登录public String login() throws Exception {return "toLoginJsp";}}user_struts.xml1 <?xml version="1.0" encoding="UTF-8" ?>2 <!DOCTYPE struts PUBLIC3 "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"4 "/dtds/struts-2.3.dtd">56 <struts>7 <package name="user" namespace="/" extends="struts-default">8 <action name="UserRegister" class="erAction"9 method="register">10 <result name="toRegisterJsp" type="dispatcher">11 /register_success.jsp12 </result>13 </action>14 <action name="UserLogin" class="erAction"15 method="login">16 <result name="toLoginJsp" type="dispatcher">17 /login_success.jsp18 </result>19 </action>20 </package>21 </struts>Login_success.jsp<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ taglib uri="/struts-tags" prefix="s" %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body>登录成功！<hr>⽤户名:<s:property value="username"/></body></html>register_success.jsp<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ taglib uri="/struts-tags" prefix="s" %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body>注册成功<br/><hr>⽤户名：<s:property value="username" />密码：<s:property value="password"/></body></html>。
axja最牛的无刷新技术
}
function callbackLogin(json) {
$("#loginForm").hide();
if (json.message == 'failure') {
$("#loginResult").html("用户名或密码错误！<a href='javascript:loginAgain()'>请重新登录</a>");
} catch (Exception e) {
logger.error(e.toString(),e);
}
return SUCCESS;
}
2 struts.xml
<result type="json">
<param name="excludeProperties">logger,memberinfoManager,organizationpos,menuUtil
<input type="checkbox" name="checkbox" value="checkbox" />
自动登录
<input type="submit" value="登录" onclick="userLogin()"/>
免费注册
}
} catch (Exception e) {
logger.error(e.toString(), e);
Struts2整合jQuery实现Ajax功能
Struts2整合jQuery实现Ajax功能技术领域很多东西流行，自然有流行的道理，这几天用了jQuery，深感有些人真是聪明绝顶，能将那么多技术融合的如此完美。
首先明确个概念：jQuery是什么：是使用javacript语言开发的，用于满足项目前台各种操作需要的j程序文件。
也就是说，jQuery基本上就是个j程序集，基础核心是jQuery.j文件。
当然根据不同的版本具体的表现形式：jQuery.1.6.j或者jquery-1.5.1.j这个是版本号的不同，具体有哪些区别，还没发现。
还有这种形式jquery-1.5.1.min.j（紧缩格式，取消回车，一行代码）根据应用需求的不同，jQuery1引入jQuery项目中引入jQuery2jQuery的Aja某jQuery的内容非常庞杂，可以解决诸多方面的需求，主要包括：Aja 某，页面效果，页面验证。
作为J2ee项目，我主要关注了一下Aja某和页面验证。
具体格式，上述网站说的已经非常清楚了，记住如下格式就可以。
$.aja某({type:'POST',//提交方法url:url,//提交的地址data:data,//提交的参数ucce:ucce,//成功后，回调的函数名dataType:dataType//返回的数据类型});示例：pot的示例：使用aja某（）的简化格式pot（）方法：中间有三个参数：url，data（jon格式），回调函数（回调函数可以定义在他处，此处仅写函数名）$.pot(\{name:\function(data){alert(\});3Strut2整合jQuery$.pot(\)3.1Login.jp页面：功能：用户登录，首先需要输入公司标识码：正确：显示对勾；错误：显示红叉；jQuery代码：HTML：当文本框失去焦点时，触发回调事件。
公司标识当文本框‘ckey’失去焦点时：调用“checkkey”函数；“checkkey”函数分别确定两个信息：异步访问：'getKeyE某it'——判断标识是否正确的Action类。
struts2+hibernate+ajax实现登陆验证
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>仅供参考，仅供参考。
Struts2用Jquery实现Ajax
Struts2⽤Jquery实现Ajax今天来说说如何⽤Jquery实现Struts 2中的Ajax。
2、struts.xml添加专为ajax使⽤的packageview sourceprint?<package name="ajax"extends="json-default"><action name="ajaxRequest"class="org.david.struts2.HelloWorld"><result type="json"></result></action></package>3、helloworld.jsp<SCRIPT type="text/javascript" src="js/jquery.js"></script> <SCRIPT type="text/javascript"> function clickButton() { var url = 'ajaxRequest.action'; var params = { name:$('#name').attr('value') <input id="name" type="text"><input type="button" value="ok" onclick="javascript:clickButton();">4、HelloWorld.javapackage org.david.struts2;public class HelloWorld { private String name; private String result; // ajax请求参数赋值 public void setName(String name) { = name; } // ajax返回结果 public String getResult() { return result; } publi 顺便说⼀下这个HelloWorld的代码，如果需要在类⾥⽤到⼀个辅助类，如操作JDBC的数据库访问类，修改如下view sourceprint?package org.david.struts2;public class HelloWorld {private String name;private String result;<BR> private DBOperator dbOperator;<BR> <BR>view sourceprint?<SPAN style="COLOR: #999999">@JSON(serialize=<SPAN style="COLOR: #3366ff">false</SPAN>) </SPAN> <BR>priavate DBOperator getDbOperator()<BR> {view sourceprint?return this.dbOperator;<BR> }view sourceprint?private void setDbOperator(DBOperator dbOperator)<BR>{<BR> this.dbOperator=dbOperator;<BR>}view sourceprint?// ajax请求参数赋值public void setName(String name) { = name;}// ajax返回结果public String getResult() {return result;}public String execute() {this.result = "Hello! "+ + ".";return"success";}}其实这样写主要是我做项⽬的时候要⽤到Spring的注⼊，必须这样做。
用AJAX实现页面登陆以及注册用户名验证的简单实例
⽤AJAX实现页⾯登陆以及注册⽤户名验证的简单实例AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指⼀种创建交互式⽹页应⽤的⽹页开发技术。
AJAX 是⼀种⽤于创建快速动态⽹页的技术。
其核⼼是 JavaScript 对象 XMLHttpRequest。
该对象在 Internet Explorer 5 中⾸次引⼊，它是⼀种⽀持异步请求的技术。
简⽽⾔之，XMLHttpRequest使您可以使⽤ JavaScript 向服务器提出请求并处理响应，⽽不阻塞⽤户。
通过在后台与服务器进⾏少量数据交换，AJAX 可以使⽹页实现异步更新。
这意味着可以在不重新加载整个⽹页的情况下，对⽹页的某部分进⾏更新。
传统的⽹页（不使⽤ AJAX）如果需要更新内容，必须重载整个⽹页页⾯。
试想如果在注册时，提交了注册信息，等了⼏秒后页⾯重载了，结果弹出⼀个提⽰框告诉你“⽤户名已被使⽤”，那将是很令⼈恼⽕的⼀件事。
所以在这⾥，使⽤AJAX实现异步请求，即可在不重载页⾯的情况下实现与数据库的通讯。
创建XMLHTTPRequest对象使⽤javascript在html页⾯中创建XMLHTTPRequest对象，实现AJAX异步请求：<span style="font-size:14px;"> var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true);xmlhttp.onreadystatechange = function (){if (xmlhttp.readyState == 4){if (xmlhttp.status == 200){alert(xmlhttp.responseText);}else{alert("AJAX服务器返回错误！");}}}xmlhttp.send();</span>var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象，考虑兼容性xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true); //“准备”向服务器的GetDate1.ashx发出Post请求（GET可能会有缓存问题）。
利用ajax完成简单的注册登录
利⽤ajax完成简单的注册登录⼀、⾸先我们会把ajacx进⾏封装，众所周知，ajax的步骤⼀般分为四个部分1、创建ajax对象const xhr = new XMLHttpRequest();2、打开连接，⾥⾯的三个参数代表的是请求⽅式和连接的路径，路径的后⾯可以直接加？+数据；第三个参数是布尔类型，代表是否执⾏异步操作，然后true代表异步，false代表同步xhr.open('get','demo.php?id=1',true);3、发送请求xhr.send();4、监听请求状态xhr.onreadystatechange = function(){// 判断xhr的状态(0~4 4的时候就圆满完成)和请求的状态 - 200if(xhr.readyState===4 && xhr.status==200){// 接收响应数据let res = xhr.responseText;console(res);}}然后post请求⾥⾯是需要在send()⾥⾯传输数据的，需要在发送请求前，设置post请求头，模拟表单来传递数据给服务端（否则获取不到send中的参数）//请求头ajax.setRequestHeader('content-type', 'application/x-www-form-urlencoded')//send发送请求的时候要携带请求参数（键1=值1&键2=值2）ajax.send('name=Jack&age=18&gender=男')⼆、然后，我来介绍⼀下，简单的封装ajax/*封装ajax*/function sendAjax(options){// 处理每个选项// 路径必填，且是字符串if(!options.url){// 没有传urlthrow new Error("请求地址必填");}// 如果代码能⾛到这⾥，传了地址// 判断类型if(Object.prototype.toString.call(options.url) !== '[object String]'){// 不是字符串throw new Error("请求地址必须是字符串");}// 处理请求⽅式// 没有传，默认是getif(!options.method){options.method = 'get';}// 如果代码能⾛到这⾥，说明传⼊了// 判断是否是get或postif(options.method.toLowerCase()!=="get" && options.method.toLowerCase()!=="post"){// 不是get或postthrow new Error("请求⽅式只接受get或post");}// 处理数据if(!options.data){ // 如果没传// 默认赋值为nulloptions.data = null;}else{ // 如果有传⼊var data = '';// 判断数据是字符串还是objectif(Object.prototype.toString.call(options.data)==='[object String]'){// 如果是字符串// 判断是否⾄少包含⼀个 =if(options.data.indexOf("=") === -1){throw new Error("数据格式有误！");}}else if(Object.prototype.toString.call(options.data)==='[object Object]'){// {"username":"张三","password":123456,tel:1234567810} 转为// 'username=张三&password=123456&tel=12345678910'var f = '';for(var attr in options.data){data += f + attr + "=" + options.data[attr];f = '&';}}// 代码⾛到这⾥，data都是⼀个字符串，是数据// 请求⽅式是否为getif(options.method==="get"){// 将数据放在地址后⾯options.url = options.url + "?" + data; // "demo.php?[object Object]"}}// 处理是否异步的asyncif(options.async===undefined){ // 值是undefiend表⽰没有传options.async = true;}// 代码⾛到这⾥，说明async传⼊了// 判断类型是否是布尔值if(Object.prototype.toString.call(options.async) !== '[object Boolean]'){throw new Error("async参数只接受布尔类型");}// 处理想要的数据格式 dataType// 判断是否传⼊if(!options.dataType){options.dataType = 'string';}// 如果能⾛到这⾥，传⼊了，就判断是否为 string或jsonif(options.dataType.toLowerCase() !== 'string' && options.dataType.toLowerCase() !== 'json'){ throw new Error("dataType参数只接受string或json");}// 处理成功时要执⾏的回调函数// 判断是否传⼊if(!options.success){options.success = function(){}}// 如果传⼊了，判断是否是⼀个函数if(Object.prototype.toString.call(options.success) !== '[object Function]'){throw new Error("success参数只接受函数类型");}// 处理错误是执⾏的函数if(!options.error){options.error = function(){}}// 如果传⼊了，判断是否是⼀个函数if(Object.prototype.toString.call(options.error) !== '[object Function]'){throw new Error("error参数只接受函数类型");}// 到这⾥所有参数处理完毕 - 开始ajax// ajax对象的兼容写法var xhr;try{xhr = new XMLHttpRequest(); // 这种写法在ie下是不能兼容的}catch(e){try{xhr = new ActiveXObject("Microsoft.XMLHTTP"); // 兼容ie678}catch(err){xhr = new ActiveXObject("Msxml2.XMLHTTP"); // 更低版本ie}}// 打开xhr.open(options.method,options.url,options.async);// 监听xhr.onreadystatechange = function(){// 判断ajax的状态// 先判断是否完成if(xhr.readyState===4){// 在判断是否成功if(xhr.status>=200 && xhr.status<300){// 成功// 获取响应的数据var res = xhr.responseText;// 判断想要的数据格式是什么if(options.dataType==="json"){// 如果是json，就将数据先转为json对象res = JSON.parse(res);}// 调⽤成功想执⾏的函数options.success(res);}else{ // 请求失败了}}}// 发送if(options.method==="post"){xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); xhr.send(data);return;}xhr.send();}<!DOCTYPE html><head><meta charset='utf-8'><title>Document</title></head><body><div><span></span><table align="center"><caption><h2>登录</h2></caption><tr><td>⽤户名：</td><td><input type="text" name="username"></td></tr><tr><td>密码：</td><td><input type="password" name="password"></td></tr><tr><td></td><td><input type="button" value="登录"></td></tr></table></div></body><script src="./js/ajax.js"></script><script>var btn = document.querySelector("input[type='button']");var usernamein = document.querySelector("input[name='username']");var passwordin = document.querySelector("input[name='password']");btn.addEventListener("click",login);function login(){var username = usernamein.value.trim();var password = passwordin.value.trim();// 验证数据var usernameRule = /^(\w|[\u4e00-\u9fa5]){2,12}$/;var passwordRule = /^[a-zA-Z0-9]{6,16}$/;if(!usernameRule.test(username)){alert("⽤户名必须是2~12位的数字、字母、下划线或汉字");return false;}if(!passwordRule.test(password)){alert("密码必须是6~16的数字、字母");return false;}//调⽤函数发送ajax//⾥⾯的username是键值对，其实是username:usernamesendAjax({url:"login.php",method:"post",data:{username,password},dataType:"json",success:res=>{if(res.meta.status===201){alert(res.meta.msg);location.assign("home.html");}else{alert(res.meta.msg);return false;}}});}</script></html>/*********************** 这是请求⽰例 **************************//*sendAjax({url:"demo.php",method:"post",success:function(res){console.log(res);},dataType:"json",async:true,data:{username:"张三",sex:"⼥"}});sendAjax({method,url,async,data,datatype,success})*/这个ajax⾥⾯是⽤⼀些简单的if判断去对数据进⾏判断的，然后有需要的朋友可以过来看看哦之后直接引⽤这个ajax函数直接写出登录注册功能，因为后台请求数据，我们是⽤php这个⼯具进⾏操作的。
Struts2+JQuery插件的使用
Struts2—使用JQuery插件(2) 本节介绍更多更高级的JQuery控件.1.首先做好基本配置，这次将JSON 插件一起加入struts2xml文件struts-jquery.xml2.选项卡效果2.1选项卡的内容在本地新建localtab.jsp关于JqueryUI 插件:在Jquery官方，提供了很多的jquery插件，其中jqueryUI 是一套关于用户界面的插件，使用它可以很方便的做出各种界面效果，而且还提供了themes 各种主题包的下载，可以很方便的更换主题在为Struts2做插件的时候，struts2-jquery插件将jquery官方的jquery核心js文件，还有jquery的UI插件，以及主题(themes)都打进了jar包中，如下图在localtab.jsp文件中添加如下代码:运行该jsp文件，效果如下:字体有些大，我们可以通过css将字体进行调整上面我们使用<sj:head >标签引入jquery库的时候，只是使用<sj:head jqueryui="true" />引入了jqueyUI，此时会有一个默认的themes被应用。
我们可以查看生成的HTML 源代码：可以看到themes的名称为smoothness,那么插件包中都提供了那些themes呢，我们可以查看struts2-jquery-plugin-1.8.X.ja文件:可以看到提供了cupertino ,darkness,lightness, redmod,smoothness 这样的几个风格，其中smoothness是默认的风格.2.2改变风格如何改变风格呢?很简单在<sj:head />中只需要给jquerytheme属性设置风格名称即可:做完这个设置之后，浏览页面：可以看到这个页面的风格发生了变化插件包中提供的主题毕竟有限，如果我们需要更多的主题，我们可以到jquery官方网站下载更多的主题，甚至可以使用官网提供的在线工具定制出我们需要的主题.Jquey首页: 定制主题(theme)下载定制好的主题:下载之后的文件, 这里我下载的是名称为start的themes：进入development-bundle 文件夹:进入themes文件夹里面有两个themes，一个是base，一个是start，这两个文件夹的目录结构都是一样的，不光是这两个一样，所有的jquery UI的themes目录结构都是一样的，里面都是一些css样式，还有图片文件。