Ausführliche Erläuterung der Verwendung von AJAX zur Durchführung der asynchronen Überprüfung des Benutzernamens

In diesem Artikel werden hauptsächlich relevante Informationen zur Verwendung von AJAX zur Vervollständigung der asynchronen Überprüfung von Benutzernamen vorgestellt. Ich hoffe, dass er allen helfen kann.

Verwenden Sie AJAX, um die asynchrone Überprüfung durchzuführen, ob der Benutzername vorhanden ist:

1. Ereignisauslösung:

* onblur

2. Schreiben Sie AJAX-Code:

* übermittelt in Aktion: Übergeben Sie den Benutzernamenparameter

3. Schreiben Sie Aktion

* Benutzernamen erhalten: Modellgesteuerter Empfang.

4.* Entitätsklasse schreiben

* Benutzer

* User.hbm.xml

* In den Frühling konfigurieren.

5. DAO schreiben

* HibernateDaoSupport erben

* sessionFactory einfügen

6. Schreibdienst:

* Inject UserDao

* Transaktionsverwaltung:

Kerncode-Implementierung:

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>

Verwandte Empfehlungen;

Javascript schreibt das asynchrone Verifizierungsformular in ein synchrones Formular um_Javascript-Kenntnisse

Detaillierte Erläuterung der traditionellen Methode von Javascript zur Erlangung asynchroner Verifizierung_Javascript-Fähigkeiten

Beispiele erläutern die traditionelle Ajax-Implementierung der Benutzernamenüberprüfung und die $.post-Methode von jquery

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von AJAX zur Durchführung der asynchronen Überprüfung des Benutzernamens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!