SSH网上商城之使用ajax完成用户名是否存在异步校验-js教程-PHP中文网

首页

web前端

js教程

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

亚连

May 24, 2018 pm 12:00 PM

ajax网上商城

这篇文章主要介绍了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=&#39;red&#39;>用户名已经存在</font>"); 
    }else{ 
      //没查询到该用户：用户名可以使用 
      response.getWriter().println("<font color=&#39;green&#39;>用户名已经存在</font>"); 
    } 
    return NONE; 
  } 
  /** 
   * 用戶注册的方法： 
   */ 
  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里面完成对Dao的调用，具体代码如下所示：

<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>

接着我们需要在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=&#39;red&#39;>用户名已经存在</font>"); 
    }else{ 
      //没查询到该用户：用户名可以使用 
      response.getWriter().println("<font color=&#39;green&#39;>用户名已经存在</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>

不要忘记了，要把她陪到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>

代码到此结束，下面给大家展示下效果图：

上面是我整理给大家的，希望今后会对大家有帮助。

ajax请求之返回数据的顺序问题分析

防止重复发送Ajax请求的解决方案

解决ajax返回验证的时候总是弹出error错误的方法

以上是SSH网上商城之使用ajax完成用户名是否存在异步校验的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Python vs. JavaScript：性能和效率注意事项Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差异主要体现在：1)Python作为解释型语言，运行速度较慢，但开发效率高，适合快速原型开发；2)JavaScript在浏览器中受限于单线程，但在Node.js中可利用多线程和异步I/O提升性能，两者在实际项目中各有优势。

JavaScript的起源：探索其实施语言Apr 29, 2025 am 12:51 AM

JavaScript起源于1995年，由布兰登·艾克创造，实现语言为C语言。1.C语言为JavaScript提供了高性能和系统级编程能力。2.JavaScript的内存管理和性能优化依赖于C语言。3.C语言的跨平台特性帮助JavaScript在不同操作系统上高效运行。

幕后：什么语言能力JavaScript？Apr 28, 2025 am 12:01 AM

JavaScript在浏览器和Node.js环境中运行，依赖JavaScript引擎解析和执行代码。1）解析阶段生成抽象语法树（AST）；2）编译阶段将AST转换为字节码或机器码；3）执行阶段执行编译后的代码。

Python和JavaScript的未来：趋势和预测Apr 27, 2025 am 12:21 AM

Python和JavaScript的未来趋势包括：1.Python将巩固在科学计算和AI领域的地位，2.JavaScript将推动Web技术发展，3.跨平台开发将成为热门，4.性能优化将是重点。两者都将继续在各自领域扩展应用场景，并在性能上有更多突破。

Python vs. JavaScript：开发环境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。