這篇文章主要介紹了SSH網上商城之使用ajax完成用戶名是否存在異步校驗的相關資料,需要的朋友可以參考下
小伙伴在上網的時候,需要下載或者觀看某些影片資料,更或者是在逛淘寶的時候,我們都需要註冊一個用戶,當我們填寫好各種信息,點擊確定的時候,提示用戶名已經存在,小編就想,為什麼當我們填寫完用戶名的時候,她就自動提示用戶名已經存在,我們也不需要浪費那麼多感情,直到填寫完那麼多的信息之後在提示,在小編最近的項目中,就碰到這個問題,我們可以使用ajax完成用戶名是否存在,今天這篇博客,小編就簡單的總結一下,如何使用ajax來完成校驗,還請小伙伴多多指教哦`(*∩_∩*)′!
首先ajax完成使用者名稱是否有非同步校驗,那麼我們該如何做呢?在這裡,我們要由事件進行觸發,也就是說,我們在用戶名裡面輸入的時候,滑鼠移開,這個事件叫做onblur,即失去焦點,與其相對的,滑鼠放在裡面獲得焦點,我們稱之為為onfocus,那麼失去焦點,我們該怎麼操作呢?首先找到註冊頁面,在註冊頁面找到使用者名稱那部分的程式碼,在後面加上onblur=checkUsername(),校驗使用者名稱即可,接著我們來寫方法checkUsername,具體程式碼如下所示:
<span style="font-size:18px;">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; } </span>
接著,我們來建立實體Vo,實現模型驅動,自動實現封裝,具體程式碼如下所示:
#<span style="font-size:18px;">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; } }</span>
我們要接收參數,實作模型驅動,ActionSupport直接實作modelDriven即可,接著來寫我們的ajax程式碼,需要向action中提交,我們來寫UserAction中的程式碼,具體程式碼如下所示:
<span style="font-size:18px;">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进行异步校验用户名的执行方法 * @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){ //查询到该用户:用户名已经存在 response.getWriter().println("<font color='red'>用户名已经存在</font>"); }else{ //没查询到该用户:用户名可以使用 response.getWriter().println("<font color='green'>用户名已经存在</font>"); } return NONE; } /** * 用戶注册的方法: */ public String regist(){ return NONE; } } </span>
<span style="font-size:18px;"><!-- 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> </span>
<span style="font-size:18px;">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; } } </span>
<span style="font-size:18px;">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; } //按用户名查询用户的方法 public User findByUsername (String username){ return userDao.findByUsername(username); } } </span>
<span style="font-size:18px;">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进行异步校验用户名的执行方法 * @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){ //查询到该用户:用户名已经存在 response.getWriter().println("<font color='red'>用户名已经存在</font>"); }else{ //没查询到该用户:用户名可以使用 response.getWriter().println("<font color='green'>用户名已经存在</font>"); } return NONE; } /** * 用戶注册的方法: */ public String regist(){ return NONE; } } </span>
#
<span style="font-size:18px;"><?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></span>
<span style="font-size:18px;"><!-- 配置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> </span>
##
以上是SSH網路商城之使用ajax完成使用者名稱是否有非同步校驗的詳細內容。更多資訊請關注PHP中文網其他相關文章!