使用AJAX完成用户名是否存在异步校验

使用AJAX完成用户名是否存在异步校验:

1.事件触发:

* onblur

2.编写AJAX代码:

* 项Action中提交:传递username参数

3.编写Action

* 接收username:模型驱动接收.

4.* 编写实体类

* User

* User.hbm.xml

* 配置到spring中.

5.编写DAO

* 继承HibernateDaoSupport

* 在配置中注入sessionFactory

6.编写Service:

* 注入UserDao

* 事务管理:

核心代码实现:

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="+username,true); // 4.发送 xhr.send(null); } function createXmlHttp(){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e){ try{// Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } } return xmlHttp; } 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) { // 查询到该用户:用户名已经存在 response.getWriter().println("<font color='red'>用户名已经存在</font>"); } else { // 没查询到该用户:用户名可以使用 response.getWriter().println("<font color='green'>用户名可以使用</font>"); } return NONE; } private UserDao userDao; public void setUserDao(UserDao userDao) { this.userDao = userDao; } // 按用户名查询用户的方法: public User findByUsername(String username){ return userDao.findByUsername(username); } 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; } <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd"> <!-- 配置连接池: --> <!-- 引入外部属性文件 --> <context:property-placeholder location="classpath:jdbc.properties"/> <!-- 配置C3P0连接池: --> <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource"> <property name="driverClass" value="${jdbc.driver}"/> <property name="jdbcUrl" value="${jdbc.url}"/> <property name="user" value="${jdbc.user}"/> <property name="password" value="${jdbc.password}"/> </bean> <!-- Hibernate的相关信息 --> <bean id="sessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFactoryBean"> <!-- 注入连接池 --> <property name="dataSource" ref="dataSource"/> <!-- 配置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> </bean> <!-- 事务管理: --> <!-- 事务管理器 --> <bean id="transactionManager" class="org.springframework.orm.hibernate3.HibernateTransactionManager"> <property name="sessionFactory" ref="sessionFactory"/> </bean> <!-- 开启注解事务 --> <tx:annotation-driven transaction-manager="transactionManager"/> <!-- Action的配置 ===========================--> <!-- 首页访问的Action --> <bean id="indexAction" class="cn.itcast.shop.index.action.IndexAction" scope="prototype"> </bean> <!-- 配置验证码Action --> <bean id="checkImgAction" class="cn.itcast.shop.user.action.CheckImgAction" scope="prototype"> </bean> <!-- 用户模块的Action --> <bean id="userAction" class="cn.itcast.shop.user.action.UserAction" scope="prototype"> <!-- 注入Service --> <property name="userService" ref="userService"/> </bean> <!-- Service的配置 ===========================--> <bean id="userService" class="cn.itcast.shop.user.service.UserService"> <property name="userDao" ref="userDao"/> </bean> <!-- Dao的配置 ===========================--> <bean id="userDao" class="cn.itcast.shop.user.dao.UserDao"> <property name="sessionFactory" ref="sessionFactory"/> </bean> </beans> [html] view plain copy 在CODE上查看代码片派生到我的代码片 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"> <struts> <constant name="struts.devMode" value="false" /> <constant name="struts.enable.DynamicMethodInvocation" value="true"/> <package name="shop" extends="struts-default" namespace="/"> <global-results> <result name="msg">/WEB-INF/jsp/msg.jsp</result> </global-results> <!-- 配置首页访问的Action --> <action name="index" class="indexAction"> <result name="index">/WEB-INF/jsp/index.jsp</result> </action> <!-- 配置用户模块的Action --> <action name="user_*" class="userAction" method="{1}"> <result name="registPage">/WEB-INF/jsp/regist.jsp</result> <result name="input">/WEB-INF/jsp/regist.jsp</result> <result name="loginPage">/WEB-INF/jsp/login.jsp</result> <result name="login">/WEB-INF/jsp/login.jsp</result> <result name="loginSuccess" type="redirectAction">index</result> <result name="quit" type="redirectAction">index</result> <result name="checkcodeFail">/WEB-INF/jsp/regist.jsp</result> </action> <!-- 验证码Action --> <action name="checkImg" class="checkImgAction"></action> </package> </struts>

以上所述是小编给大家介绍的使用AJAX完成用户名是否存在异步校验,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

时间: 2024-10-24 15:57:58

使用AJAX完成用户名是否存在异步校验的相关文章

【项目实战】---使用ajax完成用户名是否存在异步校验

       小伙伴在上网的时候,需要下载或者观看某些视频资料,更或者是在逛淘宝的时候,我们都需要注册一个用户,当我们填写好各种信息,点击确定的时候,提示用户名已经存在,小编就想,为什么当我们填写完用户名的时候,她就自动提示用户名已经存在,我们也不需要浪费那么多感情,直到填写完那么多的信息之后在提示,在小编最近的项目中,就碰到这个问题,我们可以使用ajax完成用户名是否存在,今天这篇博客,小编就简单的总结一下,如何使用ajax来完成校验,还请小伙伴多多指教哦`(*∩_∩*)′!        首

SSH网上商城之使用ajax完成用户名是否存在异步校验_AJAX相关

小伙伴在上网的时候,需要下载或者观看某些视频资料,更或者是在逛淘宝的时候,我们都需要注册一个用户,当我们填写好各种信息,点击确定的时候,提示用户名已经存在,小编就想,为什么当我们填写完用户名的时候,她就自动提示用户名已经存在,我们也不需要浪费那么多感情,直到填写完那么多的信息之后在提示,在小编最近的项目中,就碰到这个问题,我们可以使用ajax完成用户名是否存在,今天这篇博客,小编就简单的总结一下,如何使用ajax来完成校验,还请小伙伴多多指教哦`(*∩_∩*)′!        首先ajax完成

SSH网上商城之使用ajax完成用户名是否存在异步校验

小伙伴在上网的时候,需要下载或者观看某些视频资料,更或者是在逛淘宝的时候,我们都需要注册一个用户,当我们填写好各种信息,点击确定的时候,提示用户名已经存在,小编就想,为什么当我们填写完用户名的时候,她就自动提示用户名已经存在,我们也不需要浪费那么多感情,直到填写完那么多的信息之后在提示,在小编最近的项目中,就碰到这个问题,我们可以使用ajax完成用户名是否存在,今天这篇博客,小编就简单的总结一下,如何使用ajax来完成校验,还请小伙伴多多指教哦`(*∩_∩*)′! 首先ajax完成用户名是否存在

jquery easyUI中ajax异步校验用户名_jquery

以前无聊写过一个小东西,其中有一个功能就是添加用户,当时并没有考虑用户名重复的问题,今日闲来无事,打算利用ajax的异步刷新来校验用户名是否存在.自己也是新手,刚刚大三,哈哈写的不对的地方请指出. 放上效果图: 首先是编写前的准备 我并不是用原生的js来写的ajax而是用的jqueryeasyUI框架中的ajax,所以在使用之前就必须要引入jquery的js文件. <link rel="stylesheet" type="text/css" href=&quo

springmvc-ajax-jquery 异步校验登录【亲测可用】

前言 一直以来都是直接提交form跳转登录,但是存在一些问题就是当密码错误的时候,又得重新跳转回来.感觉不是很理想.故采用异步校验是比较稳妥的一种处理的方式. 具体过程 jsp页面的编写 关键性代码如下 <form name="subinfo" class="form" method="post"> <div> <input type="text" required="" id

Ajax验证用户名是否存在的例子

Html代码 <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <TITLE>Ajax验证用户名是否存在例子</TIT

asp.net AJAX验证用户名是否存在 -Jquery

异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用JQuery框架实现的AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选

ajax验证用户名是否存在,失败后组阻止表单提交

问题描述 ajax验证用户名是否存在,失败后组阻止表单提交 各位大神,求助: 我先是定义了一个变量,在ajax处理完返回值时,根据ajax返回的结果,改变flag的值(初始值定义为false)可是就算是用户名通过验证可以使用,我把flag的改为true,然后return flag 但是没用 提交表单的时候flag的值还是一直是false 各位,帮帮忙 拜托了 (图片是代码) 解决方案 可以采用下面这种请求方式,设置async:false $.ajax({ url:'iajax_chekusern

利用jQuery实现的Ajax 验证用户名是否存在

异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用jQuery框架实现的AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选