【项目实战】---使用ajax完毕username是否存在异步校验
小伙伴在上网的时候。须要下载或者观看某些视频资料,更或者是在逛淘宝的时候。我们都须要注冊一个用户,当我们填写好各种信息,点击确定的时候。提示username已经存在。小编就想,为什么当我们填写完username的时候,她就自己主动提示username已经存在。我们也不须要浪费那么多感情。直到填写完那么多的信息之后在提示,在小编近期的项目中,就碰到这个问题。我们能够使用ajax完毕username是否存在。今天这篇博客。小编就简单的总结一下,怎样使用ajax来完毕校验,还请小伙伴多多不吝赐教哦`(*∩_∩*)′。
首先ajax完毕username是否存在异步校验。那么我们该怎样做呢?在这里,我们要由事件进行触发,也就是说。我们在username里面输入的时候。鼠标移开,这个事件叫做onblur。即失去焦点,与其相对的,鼠标放在里面获得焦点,我们称之为onfocus。那么失去焦点,我们该怎么操作呢?首先找到注冊页面,在注冊页面找到username那部分的代码,在后面加上onblur=checkUsername(),校验username就可以。接着我们来编写方法checkUsername。详细代码例如以下所看到的:
function checkUsername() {
//获取文本框值:
var username = document.getElementById("username").value;
//1、创建异步交互对象
var xhr = createXmlHttp();
//2、设置监听
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
document.getElementById("span1").innerHTML = xhr.responseText;
} } }
//3、打开连接
xhr.open("GET",
"${pageContext.request.contextPath}/user_findByName.action?time="
+ new Date().getTime() + "&username=", true)
//4、发送
xhr.send(null); } function createXmlHttp() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
} return xmlHttp;
}
接着,我们来建立实体Vo。实现模型驱动,自己主动实现封装,详细代码例如以下所看到的:
package cn.itcast.shop.user.vo; public class User { private Integer uid;
private String username;
private String password;
private String name;
private String email;
private String phone;
private String addr;
private Integer state;
private String code;
public Integer getUid() {
return uid;
}
public void setUid(Integer uid) {
this.uid = uid;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getAddr() {
return addr;
}
public void setAddr(String addr) {
this.addr = addr;
}
public Integer getState() {
return state;
}
public void setState(Integer state) {
this.state = state;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
} }
我们要接收參数,实现模型驱动,ActionSupport直接实现modelDriven就可以,接着来编写我们的ajax代码,须要向action中进行提交。我们来编写UserAction中的代码,详细代码例如以下所看到的:
package cn.itcast.shop.user.action; import java.io.IOException; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; import cn.itcast.shop.user.service.UserService;
import cn.itcast.shop.user.vo.User; import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;
/**
* 用户模块Action的类
* @author Flower
*
*/ public class UserAction extends ActionSupport implements ModelDriven<User> { //模型驱动使用的对象
private User user = new User();
public User getModel(){
return user; }
//注入UserService
private UserService userService; public void setUserService(UserService userService){
this.userService=userService;
} /**
* 跳转到注冊页面的运行方法
*/
public String registPage(){ return "registPage";
} /**
* ajax进行异步校验username的运行方法
* @throws IOException
*/ public String findByName() throws IOException{
//调用Service进行查询
User existUser = userService.findByUsername(user.getUsername());
//获得response对象,向页面输出
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8"); //推断
if(existUser != null){
//查询到该用户:username已经存在
response.getWriter().println("<font color='red'>username已经存在</font>");
}else{
//没查询到该用户:username能够使用
response.getWriter().println("<font color='green'>username已经存在</font>");
}
return NONE; } /**
* 用戶注冊的方法:
*/
public String regist(){ return NONE; } }
接着。我们须要做的就是把service和Dao配置到applicationContext中。代码例如以下所看到的:
<!-- Service的配置 =========================== -->
<bean id="userService" class="cn.itcast.shop.user.service.UserService">
<property name="userDao" ref="userDao"/>
</bean> <!-- UserDao的配置 =========================== -->
<bean id="userDao" class="cn.itcast.shop.user.dao.UserDao"> <property name="sessionFactory" ref="sessionFactory"></property> </bean>
配置好了之后,我们须要在UserDao里面完毕查询。详细代码例如以下所看到的:
package cn.itcast.shop.user.dao; import org.springframework.orm.hibernate3.support.HibernateDaoSupport; import java.util.List; import cn.itcast.shop.user.vo.User; /**
* 用户模块持久层代码
* @author Flower
*
*/ public class UserDao extends HibernateDaoSupport { //按名次查询是否有该用户
public User findByUsername (String username){
String hql ="from User where username= ?";
List <User> list=this.getHibernateTemplate().find(hql,username);
if(list !=null && list.size() > 0){
return list.get(0);
}
return null; } }
接着,我们须要在service里面完毕对Dao的调用,详细代码例如以下所看到的:
package cn.itcast.shop.user.service; import org.springframework.transaction.annotation.Transactional; import cn.itcast.shop.user.dao.UserDao;
import cn.itcast.shop.user.vo.User; /**
* 用户模块业务层代码
* @author Flower
*
*/ @Transactional public class UserService { //注入UserDao
private UserDao userDao; public void setUserDao(UserDao userDao){
this.userDao =userDao; } //按username查询用户的方法
public User findByUsername (String username){
return userDao.findByUsername(username);
} }
接着我们须要在UserAction中进行调用。详细代码例如以下所看到的:
package cn.itcast.shop.user.action; import java.io.IOException; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; import cn.itcast.shop.user.service.UserService;
import cn.itcast.shop.user.vo.User; import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;
/**
* 用户模块Action的类
* @author Flower
*
*/ public class UserAction extends ActionSupport implements ModelDriven<User> { //模型驱动使用的对象
private User user = new User();
public User getModel(){
return user; }
//注入UserService
private UserService userService; public void setUserService(UserService userService){
this.userService=userService;
} /**
* 跳转到注冊页面的运行方法
*/
public String registPage(){ return "registPage";
} /**
* ajax进行异步校验username的运行方法
* @throws IOException
*/ public String findByName() throws IOException{
//调用Service进行查询
User existUser = userService.findByUsername(user.getUsername());
//获得response对象。向页面输出
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8"); //推断
if(existUser != null){
//查询到该用户:username已经存在
response.getWriter().println("<font color='red'>username已经存在</font>");
}else{
//没查询到该用户:username能够使用
response.getWriter().println("<font color='green'>username已经存在</font>");
}
return NONE; } /**
* 用戶注冊的方法:
*/
public String regist(){ return NONE; } }
最后,我们来编写映射文件中面的内容,详细代码例如以下所看到的:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hibernate-mapping PUBLIC
"-//Hibernate/Hibernate Mapping DTD 3.0//EN"
"http://www.hibernate.org/dtd/hibernate-mapping-3.0.dtd"> <hibernate-mapping>
<class name="cn.itcast.shop.user.vo.User" table="user">
<id name="uid">
<generator class="native"/>
</id>
<property name="username"/>
<property name="password"/>
<property name="name"/>
<property name="email"/>
<property name="phone"/>
<property name="addr"/>
<property name="state"/>
<property name="code"/> </class> </hibernate-mapping>
不要忘记了。要把她陪到applicationContext里面。详细代码例如以下所看到的:
<!-- 配置Hibernate的其它的属性 -->
<property name="hibernateProperties">
<props>
<prop key="hibernate.dialect">org.hibernate.dialect.MySQLDialect</prop>
<prop key="hibernate.show_sql">true</prop>
<prop key="hibernate.format_sql">true</prop>
<prop key="hibernate.connection.autocommit">false</prop>
<prop key="hibernate.hbm2ddl.auto">update</prop>
</props>
</property>
<!-- 配置Hibernate的映射文件 -->
<property name="mappingResources">
<list>
<value>cn/itcast/shop/user/vo/User.hbm.xml</value>
</list>
</property>
至此,我们的代码就已经编写完毕了,来看看我们的运行效果。例如以下所看到的:
小编寄语:这篇博文。小编主要简单的介绍了一下土河使用ajax来完毕username是否存在的异步校验。总的来说。实现的思路是这样滴`(*∩_∩*)′,首先是由onblur进行事件触发。第二。编写ajax的代码,向action中提交,传递參数username,第三步,编写action,接收username,实现模型驱动配置到spring中,第四步。编写DAO。集成HibernateDaoSupport,在配置中注入sessionFactory。最后编写Service,注入UserDao。还有事务管理,一个简单的demo,还请小伙伴多多不吝赐教,SSH网上商城,精彩未完待续~~~
【项目实战】---使用ajax完毕username是否存在异步校验的更多相关文章
- SSH网上商城---使用ajax完成用户名是否存在异步校验
小伙伴在上网的时候,需要下载或者观看某些视频资料,更或者是在逛淘宝的时候,我们都需要注册一个用户,当我们填写好各种信息,点击确定的时候,提示用户名已经存在,小编就想,为什么当我们填写完用户名的时候,她 ...
- 使用AJAX完成用户名是否存在异步校验
一.JSP代码: 1.事件触发:onblur 2.编写AJAX代码:向Action中提交,传递username参数 <script> function checkUsername(){ / ...
- Selenium Web 自动化 - 项目实战(三)
Selenium Web 自动化 - 项目实战(三) 2016-08-10 目录 1 关键字驱动概述2 框架更改总览3 框架更改详解 3.1 解析新增页面目录 3.2 解析新增测试用例目录 3. ...
- .net转php laraval框架学习系列(二)项目实战---Models
上一篇已经介绍开发环境的搭建,如果有问题可以在文章后留言. 这篇将从项目实战开发,一步一步了解laravel框架. 在开发mvc项目时,models都是第一步. 下面就从建模开始. 实体关系图 由于不 ...
- 【.NET Core项目实战-统一认证平台】第十四章 授权篇-自定义授权方式
[.NET Core项目实战-统一认证平台]开篇及目录索引 上篇文章我介绍了如何强制令牌过期的实现,相信大家对IdentityServer4的验证流程有了更深的了解,本篇我将介绍如何使用自定义的授权方 ...
- [实战]MVC5+EF6+MySql企业网盘实战(5)——ajax方式注册
写在前面 今天贴合到实际的客户需求仔细的想了下,其实在userInfo这个类里面很多字段都不是必须的.有很多的事业单位根本就不能上网,填写的邮箱也是exchange的,个人的详细信息都在ad里面可以取 ...
- 手把手0基础项目实战(一)——教你搭建一套可自动化构建的微服务框架(SpringBoot+Dubbo+Docker+Jenkins)...
原文:手把手0基础项目实战(一)--教你搭建一套可自动化构建的微服务框架(SpringBoot+Dubbo+Docker+Jenkins)... 本文你将学到什么? 本文将以原理+实战的方式,首先对& ...
- 全网最全postman接口测试教程和接口项目实战~从入门到精通!!!
Postman实现接口测试内容大纲一览: 一.什么是接口?为什么需要接口? 接口指的是实体或者软件提供给外界的一种服务. 因为接口能使我们的实体或者软件的内部数据能够被外部进行修改.从而使得内 ...
- Asp.Net Core 项目实战之权限管理系统(4) 依赖注入、仓储、服务的多项目分层实现
0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...
随机推荐
- createdb - 创建一个新的 PostgreSQL 数据库
SYNOPSIS createdb [ option...] [ dbname] [ description] DESCRIPTION 描述 createdb 创建一个新的 PostgreSQL 数据 ...
- 第2节 hive基本操作:12、hive当中的hql语法
3.2. hive查询语法 3.2.1.SELECT https://cwiki.apache.org/confluence/display/Hive/LanguageManual+Select 基本 ...
- 第2节 mapreduce深入学习:12、reducetask运行机制(多看几遍)
ReduceTask的运行的整个过程 背下来1.启动线程到mapTask那里去拷贝数据,拉取属于每一个reducetask自己内部的数据2.数据的合并,拉取过来的数据进行合并,合并的过程,有可能在内存 ...
- [Python3网络爬虫开发实战] 4-解析库的使用
上一章中,我们实现了一个最基本的爬虫,但提取页面信息时使用的是正则表达式,这还是比较烦琐,而且万一有地方写错了,可能导致匹配失败,所以使用正则表达式提取页面信息多多少少还是有些不方便. 对于网页的节点 ...
- rownum导致sql不能进行谓词推入
背景 案件(13405_RI-再保结算查询导出太慢),造成性能慢的原因是执行以下sql时,每次执行平均需要消耗2秒, 画面上,点击一次导出按钮,就会发起数以百记的调用. SQL执行代码段 select ...
- chrome最强大的浏览器插件推荐,只要你会用其他的插件你可以删除了
我们在学习和工作中经常会需要用到各种各样不同需求的插件,结果chrome插件越装越多,chrome浏览器也越来越慢!有时候链我们自己都懵圈了,一时间都想不起来这个插件是干什么用的.更可气的是,很多时候 ...
- python中基于tcp协议的通信(数据传输)
tcp协议:流式协议(以数据流的形式通信传输).安全协议(收发信息都需收到确认信息才能完成收发,是一种双向通道的通信) tcp协议在OSI七层协议中属于传输层,它上承用户层的数据收发,下启网络层.数据 ...
- [Android] java代码无错误,但跳转失败
今天在调代码的时候,出现了这样的问题,我晕了半天,才找到解决办法. 查看日志发现:Initialize Binary Program Cache: Load Failed 从来没见过这种问题,Java ...
- Spring Boot 2(一):【重磅】Spring Boot 2.0权威发布
就在今天Spring Boot2.0.0.RELEASE正式发布,今天早上在发布Spring Boot2.0的时候还出现一个小插曲,将Spring Boot2.0同步到Maven仓库的时候出现了错误, ...
- Overload重載和Override重写的区别。Overloaded的方法是否可以改变返回值的类型?
Overload是重载的意思,Override是覆盖的意思,也就是重写. 重载Overload表示同一个类中可以有多个名称相同的方法,但这些方法的参数列表各不相同(即参数个数或类型不同). 重写Ove ...