盗墓笔记小说下载,辰东全部小说,欢乐颂

主頁 > 知識(shí)庫 > SSH網(wǎng)上商城之使用ajax完成用戶名是否存在異步校驗(yàn)

SSH網(wǎng)上商城之使用ajax完成用戶名是否存在異步校驗(yàn)

小伙伴在上網(wǎng)的時(shí)候，需要下載或者觀看某些視頻資料，更或者是在逛淘寶的時(shí)候，我們都需要注冊(cè)一個(gè)用戶，當(dāng)我們填寫好各種信息，點(diǎn)擊確定的時(shí)候，提示用戶名已經(jīng)存在，小編就想，為什么當(dāng)我們填寫完用戶名的時(shí)候，她就自動(dòng)提示用戶名已經(jīng)存在，我們也不需要浪費(fèi)那么多感情，直到填寫完那么多的信息之后在提示，在小編最近的項(xiàng)目中，就碰到這個(gè)問題，我們可以使用ajax完成用戶名是否存在，今天這篇博客，小編就簡單的總結(jié)一下，如何使用ajax來完成校驗(yàn)，還請(qǐng)小伙伴多多指教哦`(*∩_∩*)′！

首先ajax完成用戶名是否存在異步校驗(yàn)，那么我們?cè)撊绾巫瞿兀吭谶@里，我們要由事件進(jìn)行觸發(fā)，也就是說，我們?cè)谟脩裘锩孑斎氲臅r(shí)候，鼠標(biāo)移開，這個(gè)事件叫做onblur，即失去焦點(diǎn)，與其相對(duì)的，鼠標(biāo)放在里面獲得焦點(diǎn)，我們稱之為onfocus，那么失去焦點(diǎn)，我們?cè)撛趺床僮髂?？首先找到注?cè)頁面，在注冊(cè)頁面找到用戶名那部分的代碼，在后面加上onblur=checkUsername（），校驗(yàn)用戶名即可，接著我們來編寫方法checkUsername，具體代碼如下所示：

span style="font-size:18px;">function checkUsername() { 
    //獲取文本框值: 
    var username = document.getElementById("username").value; 
    //1、創(chuàng)建異步交互對(duì)象 
    var xhr = createXmlHttp(); 
    //2、設(shè)置監(jiān)聽 
    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、發(fā)送 
    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>

接著，我們來建立實(shí)體Vo，實(shí)現(xiàn)模型驅(qū)動(dòng)，自動(dòng)實(shí)現(xiàn)封裝，具體代碼如下所示：

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>

我們要接收參數(shù)，實(shí)現(xiàn)模型驅(qū)動(dòng)，ActionSupport直接實(shí)現(xiàn)modelDriven即可，接著來編寫我們的ajax代碼，需要向action中進(jìn)行提交，我們來編寫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 ModelDrivenUser> { 
  //模型驅(qū)動(dòng)使用的對(duì)象 
  private User user = new User(); 
  public User getModel(){ 
    return user; 
  } 
  //注入U(xiǎn)serService 
  private UserService userService; 
  public void setUserService(UserService userService){ 
    this.userService=userService; 
  } 
  /** 
   * 跳轉(zhuǎn)到注冊(cè)頁面的執(zhí)行方法 
   */ 
  public String registPage(){ 
    return "registPage"; 
  } 
  /** 
   * ajax進(jìn)行異步校驗(yàn)用戶名的執(zhí)行方法 
   * @throws IOException 
   */ 
  public String findByName() throws IOException{ 
    //調(diào)用Service進(jìn)行查詢 
    User existUser = userService.findByUsername(user.getUsername()); 
    //獲得response對(duì)象，向頁面輸出 
    HttpServletResponse response = ServletActionContext.getResponse(); 
    response.setContentType("text/html;charset=UTF-8"); 
    //判斷 
    if(existUser != null){ 
      //查詢到該用戶：用戶名已經(jīng)存在 
      response.getWriter().println("font color='red'>用戶名已經(jīng)存在/font>"); 
    }else{ 
      //沒查詢到該用戶：用戶名可以使用 
      response.getWriter().println("font color='green'>用戶名已經(jīng)存在/font>"); 
    } 
    return NONE; 
  } 
  /** 
   * 用戶注冊(cè)的方法： 
   */ 
  public String regist(){ 
    return NONE; 
  } 
} 
/span>

接著，我們需要做的就是把service和Dao配置到applicationContext中，代碼如下所示：

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>

配置好了之后，我們需要在UserDao里面完成查詢，具體代碼如下所示：

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>

接著，我們需要在service里面完成對(duì)Dao的調(diào)用，具體代碼如下所示：

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; 
/** 
 * 用戶模塊業(yè)務(wù)層代碼 
 * @author Flower 
 * 
 */ 
@Transactional 
public class UserService { 
  //注入U(xiǎn)serDao 
  private UserDao userDao; 
  public void setUserDao(UserDao userDao){ 
    this.userDao =userDao; 
  } 
  //按用戶名查詢用戶的方法 
  public User findByUsername (String username){ 
    return userDao.findByUsername(username); 
  } 
} 
/span>

接著我們需要在UserAction中進(jìn)行調(diào)用，具體代碼如下所示：

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 ModelDrivenUser> { 
  //模型驅(qū)動(dòng)使用的對(duì)象 
  private User user = new User(); 
  public User getModel(){ 
    return user; 
  } 
  //注入U(xiǎn)serService 
  private UserService userService; 
  public void setUserService(UserService userService){ 
    this.userService=userService; 
  } 
  /** 
   * 跳轉(zhuǎn)到注冊(cè)頁面的執(zhí)行方法 
   */ 
  public String registPage(){ 
    return "registPage"; 
  } 
  /** 
   * ajax進(jìn)行異步校驗(yàn)用戶名的執(zhí)行方法 
   * @throws IOException 
   */ 
  public String findByName() throws IOException{ 
    //調(diào)用Service進(jìn)行查詢 
    User existUser = userService.findByUsername(user.getUsername()); 
    //獲得response對(duì)象，向頁面輸出 
    HttpServletResponse response = ServletActionContext.getResponse(); 
    response.setContentType("text/html;charset=UTF-8"); 
    //判斷 
    if(existUser != null){ 
      //查詢到該用戶：用戶名已經(jīng)存在 
      response.getWriter().println("font color='red'>用戶名已經(jīng)存在/font>"); 
    }else{ 
      //沒查詢到該用戶：用戶名可以使用 
      response.getWriter().println("font color='green'>用戶名已經(jīng)存在/font>"); 
    } 
    return NONE; 
  } 
  /** 
   * 用戶注冊(cè)的方法： 
   */ 
  public String regist(){ 
    return NONE; 
  } 
} 
/span>

最后，我們來編寫映射文件里面的內(nèi)容，具體代碼如下所示：

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>

不要忘記了，要把她陪到applicationContext里面，具體代碼如下所示：

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>

代碼到此結(jié)束，下面給大家展示下效果圖：

小編總結(jié)：

實(shí)現(xiàn)的思路是這樣滴`(*∩_∩*)′，首先是由onblur進(jìn)行事件觸發(fā)，第二，編寫ajax的代碼，向action中提交，傳遞參數(shù)username，第三步，編寫action，接收username，實(shí)現(xiàn)模型驅(qū)動(dòng)配置到spring中，第四步，編寫DAO，集成HibernateDaoSupport，在配置中注入sessionFactory，最后編寫Service，注入U(xiǎn)serDao，還有事務(wù)管理，一個(gè)簡單的demo，還請(qǐng)小伙伴多多指教，SSH網(wǎng)上商城，精彩未完待續(xù)~~~

您可能感興趣的文章:

ThinkPHP框架結(jié)合Ajax實(shí)現(xiàn)用戶名校驗(yàn)功能示例
ajax實(shí)現(xiàn)用戶名校驗(yàn)的傳統(tǒng)和jquery的$.post方式(實(shí)例講解)
使用AJAX完成用戶名是否存在異步校驗(yàn)
ajax設(shè)置async校驗(yàn)用戶名是否存在的實(shí)現(xiàn)方法
jquery easyUI中ajax異步校驗(yàn)用戶名
Ajax校驗(yàn)用戶名是否存在的方法

標(biāo)簽：揭陽辛集咸寧紅河商洛股票佛山荊州

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《SSH網(wǎng)上商城之使用ajax完成用戶名是否存在異步校驗(yàn)》，本文關(guān)鍵詞 SSH,網(wǎng)上商城,之,使用,ajax,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。