Explication détaillée de l'utilisation d'AJAX pour effectuer la vérification asynchrone du nom d'utilisateur

Cet article présente principalement les informations pertinentes sur l'utilisation d'AJAX pour effectuer la vérification asynchrone des noms d'utilisateur. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Utilisez AJAX pour effectuer une vérification asynchrone de l'existence du nom d'utilisateur :

1. Déclenchement d'événement :

* onblur

. 2. Écrivez le code AJAX :

* soumis dans l'action : transmettez le paramètre de nom d'utilisateur

3. Écrivez l'action

*. recevoir le nom d'utilisateur : réception basée sur le modèle.

4.* Écrire la classe d'entité

* Utilisateur

* Utilisateur.hbm.xml

* Configurez jusqu'au printemps.

5. Écrivez DAO

* Héritez d'HibernateDaoSupport

* Injectez sessionFactory

6. Service d'écriture :

* Injecter UserDao

* Gestion des transactions :

Implémentation du code de base :

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

Recommandations associées ;

javascript réécrit le formulaire de vérification asynchrone en un formulaire synchrone_javascript skills

Explication détaillée de la méthode traditionnelle de javascript pour acquérir des compétences de vérification_javascript asynchrones

Des exemples expliquent l'implémentation ajax traditionnelle de la vérification du nom d'utilisateur et la méthode $.post de jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!