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

小云云
Freigeben: 2023-03-19 11:56:01
Original
1625 Leute haben es durchsucht

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; 
     }
Nach dem Login kopieren


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; 
  }
Nach dem Login kopieren


private UserDao userDao; 
  public void setUserDao(UserDao userDao) { 
    this.userDao = userDao; 
  } 
  // 按用户名查询用户的方法: 
  public User findByUsername(String username){ 
    return userDao.findByUsername(username); 
  }
Nach dem Login kopieren


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; 
  }
Nach dem Login kopieren


<?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>
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage