Heim Web-Frontend js-Tutorial SSH Online Mall verwendet Ajax, um die asynchrone Überprüfung von Benutzernamen durchzuführen

SSH Online Mall verwendet Ajax, um die asynchrone Überprüfung von Benutzernamen durchzuführen

May 24, 2018 pm 12:00 PM
ajax 网上商城

In diesem Artikel werden hauptsächlich die relevanten Informationen zur Verwendung von Ajax zur Vervollständigung der asynchronen Überprüfung von Benutzernamen in SSH-Online-Einkaufszentren vorgestellt.

Wenn Sie im Internet surfen, müssen Sie darauf zugreifen Für einige Videomaterialien oder beim Durchsuchen von Taobao müssen wir alle einen Benutzer registrieren. Wenn wir verschiedene Informationen eingeben und auf „OK“ klicken, fragt sich der Redakteur, warum Bei der Eingabe des Benutzernamens wird uns automatisch mitgeteilt, dass der Benutzername bereits vorhanden ist, bis wir nach der Eingabe so vieler Informationen dazu aufgefordert werden Kann Ajax verwenden, um zu überprüfen, ob der Benutzername vorhanden ist. Im heutigen Blog wird der Herausgeber kurz zusammenfassen, wie man Ajax verwendet, um die Überprüfung abzuschließen.

Zuerst schließt Ajax die asynchrone Überprüfung des Benutzernamens ab. Wie sollen wir das also tun? Hier müssen wir es durch ein Ereignis auslösen, das heißt, wenn wir den Benutzernamen eingeben, wird dieses Ereignis als Onblur bezeichnet, was bedeutet, dass es den Fokus verliert. es gewinnt an Fokus. Was sollen wir tun, wenn wir den Fokus verlieren? Suchen Sie zuerst die Registrierungsseite, suchen Sie den Code für den Benutzernamen auf der Registrierungsseite, fügen Sie am Ende onblur=checkUsername() hinzu, um den Benutzernamen zu überprüfen, und schreiben Sie dann die Methode checkUsername. Der spezifische Code lautet wie folgt:

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

Als nächstes erstellen wir die Entität Vo, implementieren die Modellsteuerung und implementieren automatisch die Kapselung. Der spezifische Code lautet wie folgt:

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

Wir müssen den Modelltreiber empfangen und modelDriven implementieren. Dann schreiben wir den Code in UserAction Der spezifische Code lautet wie folgt:

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

Als nächstes müssen wir den Dienst und Dao im applicationContext konfigurieren. Der Code lautet wie folgt:

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

Nach der Konfiguration müssen wir die Abfrage in UserDao vervollständigen. Der spezifische Code lautet wie folgt:

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

Dann müssen wir den Anruf an Dao im Dienst abschließen. Der spezifische Code lautet wie folgt:

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

Dann brauchen wir Um den Aufruf in UserAction durchzuführen, lautet der spezifische Code wie folgt:

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

Schließlich schreiben wir den Inhalt der Zuordnungsdatei. Der spezifische Code lautet wie folgt :

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

Vergessen Sie nicht, sie zum applicationContext zu begleiten. Der spezifische Code lautet wie folgt:

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

Der Code endet hier. Lassen Sie mich Ihnen die Renderings zeigen:

Das Obige ist, was ich für Sie zusammengestellt habe. Ich hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Analyse der Reihenfolge der zurückgegebenen Daten in Ajax-Anfragen

Lösung, um wiederholtes Senden von Ajax zu verhindern Anfragen

So lösen Sie das Problem, dass immer ein Fehler auftritt, wenn Ajax eine Bestätigung zurückgibt

Das obige ist der detaillierte Inhalt vonSSH Online Mall verwendet Ajax, um die asynchrone Überprüfung von Benutzernamen durchzuführen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So beheben Sie den 403-Fehler, der bei einer jQuery-AJAX-Anfrage auftritt So beheben Sie den 403-Fehler, der bei einer jQuery-AJAX-Anfrage auftritt Feb 20, 2024 am 10:07 AM

Titel: Methoden und Codebeispiele zur Behebung von 403-Fehlern in jQuery-AJAX-Anfragen. Der 403-Fehler bezieht sich auf eine Anfrage, dass der Server den Zugriff auf eine Ressource verbietet. Dieser Fehler tritt normalerweise auf, weil der Anfrage die Berechtigungen fehlen oder sie vom Server abgelehnt wird. Wenn Sie jQueryAJAX-Anfragen stellen, stoßen Sie manchmal auf diese Situation. In diesem Artikel wird erläutert, wie dieses Problem gelöst werden kann, und es werden Codebeispiele bereitgestellt. Lösung: Berechtigungen prüfen: Stellen Sie zunächst sicher, dass die angeforderte URL-Adresse korrekt ist und stellen Sie sicher, dass Sie über ausreichende Berechtigungen für den Zugriff auf die Ressource verfügen.

So beheben Sie den Fehler 403 der jQuery AJAX-Anfrage So beheben Sie den Fehler 403 der jQuery AJAX-Anfrage Feb 19, 2024 pm 05:55 PM

jQuery ist eine beliebte JavaScript-Bibliothek zur Vereinfachung der clientseitigen Entwicklung. AJAX ist eine Technologie, die asynchrone Anfragen sendet und mit dem Server interagiert, ohne die gesamte Webseite neu zu laden. Wenn Sie jedoch jQuery zum Senden von AJAX-Anfragen verwenden, treten manchmal 403-Fehler auf. Bei 403-Fehlern handelt es sich in der Regel um vom Server verweigerte Zugriffsfehler, möglicherweise aufgrund von Sicherheitsrichtlinien oder Berechtigungsproblemen. In diesem Artikel besprechen wir, wie Sie bei einer jQueryAJAX-Anfrage den Fehler 403 beheben können

Wie erhalte ich Variablen aus der PHP-Methode mit Ajax? Wie erhalte ich Variablen aus der PHP-Methode mit Ajax? Mar 09, 2024 pm 05:36 PM

Die Verwendung von Ajax zum Abrufen von Variablen aus PHP-Methoden ist ein häufiges Szenario in der Webentwicklung. Durch Ajax kann die Seite dynamisch abgerufen werden, ohne dass die Daten aktualisiert werden müssen. In diesem Artikel stellen wir vor, wie man Ajax verwendet, um Variablen aus PHP-Methoden abzurufen, und stellen spezifische Codebeispiele bereit. Zuerst müssen wir eine PHP-Datei schreiben, um die Ajax-Anfrage zu verarbeiten und die erforderlichen Variablen zurückzugeben. Hier ist ein Beispielcode für eine einfache PHP-Datei getData.php:

Wie kann das Problem des jQuery AJAX-Fehlers 403 gelöst werden? Wie kann das Problem des jQuery AJAX-Fehlers 403 gelöst werden? Feb 23, 2024 pm 04:27 PM

Wie kann das Problem des jQueryAJAX-Fehlers 403 gelöst werden? Bei der Entwicklung von Webanwendungen wird jQuery häufig zum Senden asynchroner Anfragen verwendet. Allerdings kann bei der Verwendung von jQueryAJAX manchmal der Fehlercode 403 auftreten, der darauf hinweist, dass der Zugriff vom Server verboten ist. Dies wird normalerweise durch serverseitige Sicherheitseinstellungen verursacht, es gibt jedoch Möglichkeiten, das Problem zu beheben. In diesem Artikel wird erläutert, wie Sie das Problem des jQueryAJAX-Fehlers 403 lösen können, und es werden spezifische Codebeispiele bereitgestellt. 1. machen

PHP vs. Ajax: Lösungen zum Erstellen dynamisch geladener Inhalte PHP vs. Ajax: Lösungen zum Erstellen dynamisch geladener Inhalte Jun 06, 2024 pm 01:12 PM

Ajax (Asynchronous JavaScript and XML) ermöglicht das Hinzufügen dynamischer Inhalte, ohne die Seite neu laden zu müssen. Mit PHP und Ajax können Sie eine Produktliste dynamisch laden: HTML erstellt eine Seite mit einem Containerelement und die Ajax-Anfrage fügt die Daten nach dem Laden zum Element hinzu. JavaScript verwendet Ajax, um über XMLHttpRequest eine Anfrage an den Server zu senden, um Produktdaten im JSON-Format vom Server abzurufen. PHP nutzt MySQL, um Produktdaten aus der Datenbank abzufragen und in das JSON-Format zu kodieren. JavaScript analysiert die JSON-Daten und zeigt sie im Seitencontainer an. Durch Klicken auf die Schaltfläche wird eine Ajax-Anfrage zum Laden der Produktliste ausgelöst.

PHP und Ajax: Erstellen einer Autovervollständigungs-Vorschlags-Engine PHP und Ajax: Erstellen einer Autovervollständigungs-Vorschlags-Engine Jun 02, 2024 pm 08:39 PM

Erstellen Sie eine Engine für Autovervollständigungsvorschläge mit PHP und Ajax: Serverseitiges Skript: Verarbeitet Ajax-Anfragen und gibt Vorschläge zurück (autocomplete.php). Client-Skript: Ajax-Anfrage senden und Vorschläge anzeigen (autocomplete.js). Praktischer Fall: Fügen Sie ein Skript in die HTML-Seite ein und geben Sie die Kennung des Sucheingabeelements an.

Asynchroner Datenaustausch mithilfe von Ajax-Funktionen Asynchroner Datenaustausch mithilfe von Ajax-Funktionen Jan 26, 2024 am 09:41 AM

So verwenden Sie Ajax-Funktionen, um eine asynchrone Dateninteraktion zu erreichen. Mit der Entwicklung der Internet- und Webtechnologie ist die Dateninteraktion zwischen dem Front-End und dem Back-End sehr wichtig geworden. Herkömmliche Dateninteraktionsmethoden wie Seitenaktualisierung und Formularübermittlung können die Benutzeranforderungen nicht mehr erfüllen. Ajax (Asynchronous JavaScript and XML) ist zu einem wichtigen Werkzeug für die asynchrone Dateninteraktion geworden. Ajax ermöglicht dem Web die Verwendung von JavaScript und dem XMLHttpRequest-Objekt

Ajax-Frameworks verstehen: Entdecken Sie fünf gängige Frameworks Ajax-Frameworks verstehen: Entdecken Sie fünf gängige Frameworks Jan 26, 2024 am 09:28 AM

Das Ajax-Framework verstehen: Entdecken Sie fünf gängige Frameworks, die spezifische Codebeispiele erfordern. Einführung: Ajax ist eine der wesentlichen Technologien in der modernen Webanwendungsentwicklung. Aufgrund seiner Funktionen wie der Unterstützung der asynchronen Dateninteraktion und der Verbesserung der Benutzererfahrung ist es zu einem unverzichtbaren Bestandteil der Front-End-Entwicklung geworden. Um das Ajax-Framework besser zu verstehen und zu beherrschen, werden in diesem Artikel fünf gängige Ajax-Frameworks vorgestellt und spezifische Codebeispiele bereitgestellt, um den Lesern ein umfassendes Verständnis der Verwendung und Vorteile dieser Frameworks zu vermitteln. 1. jQuery jQuery ist derzeit am weitesten verbreitet

See all articles