So verwenden Sie Ajax, um asynchron zu prüfen, ob der Benutzername doppelt vorhanden ist

Dieses Mal zeige ich Ihnen, wie Sie mit Ajax asynchron prüfen, ob der Benutzername dupliziert ist. Welche Vorsichtsmaßnahmen es gibt, um mit Ajax asynchron zu prüfen, ob der Benutzername dupliziert ist Fall. Werfen wir einen Blick darauf.

Bei der Registrierung eines Benutzers auf einer Website wird geprüft, ob der Benutzer bereits existiert. Vor langer Zeit bestand die Verarbeitungsmethode darin, alle Daten zur Überprüfung an den Server zu übermitteln. Später war die Benutzererfahrung mit Ajax und der asynchronen Interaktion sehr schlecht Geben Sie andere Informationen ein. Ajax sendet die Informationen an den Server, um zu überprüfen, ob der Benutzername registriert wurde. Wenn der Benutzername bereits vorhanden ist, kann eine Eingabeaufforderung gegeben werden, ohne darauf warten zu müssen, dass der Benutzer alle Daten übermittelt. Die Verwendung dieser Methode verbessert die Benutzererfahrung erheblich. Heute werde ich mit Ihnen über diese Interaktionsmethode sprechen.

Im Folgenden wird die Benutzer-ID mithilfe von JS abgerufen und dann an die Seite user_validate.jsp gesendet. Anschließend wird die von der Seite zurückgegebene Nachricht über die Rückrufmethode empfangen und der Benutzer benachrichtigt.

function validate(field) { 
  if (trim(field.value).length != 0) { 
    //创建Ajax核心对象XMLHttpRequest 
    createXMLHttpRequest(); 
     
    var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime(); 
     
    //设置请求方式为GET，设置请求的URL，设置为异步提交 
    xmlHttp.open("GET", url, true); 
     
    //将方法地址复制给onreadystatechange属性 
    //类似于电话号码 
    xmlHttp.onreadystatechange=callback; 
     
    //将设置信息发送到Ajax引擎 
    xmlHttp.send(null); 
  } else { 
    document.getElementById("spanUserId").innerHTML = ""; 
  } 
} 
 
function callback() { 
  //alert(xmlHttp.readyState); 
  //Ajax引擎状态为成功 
  if (xmlHttp.readyState == 4) { 
    //HTTP协议状态为成功 
    if (xmlHttp.status == 200) { 
      if (trim(xmlHttp.responseText) != "") { 
        //alert(xmlHttp.responseText); 
        document.getElementById("spanUserId").innerHTML = "<font color=&#39;red&#39;>" + xmlHttp.responseText + "</font>"; 
      }else { 
        document.getElementById("spanUserId").innerHTML = ""; 
      } 
    }else { 
      alert("请求失败，错误码=" + xmlHttp.status); 
    } 
  } 
}

Die Seite user_validate.jsp empfängt die Benutzer-ID und fragt anhand der ID ab, ob sie vorhanden ist. Wenn sie nicht vorhanden ist, wird nichts zurückgegeben.

<% 
  String userId = request.getParameter("userId"); 
  if(UserManager.getInstance().findUserById(userId) != null) { 
    out.println("用户代码已经存在"); 
  } 
%>

Die Prüfmethode wird ausgelöst, wenn der Cursor das Benutzercode-Textfeld verlässt.

Code kopieren Der Code lautet wie folgt:

Rendering

Wie Ich werde den Code zur Abfrage, ob die ID bereits existiert, nicht posten, da er zu einfach ist und ich Angst habe, die Bandbreite aller zu verschwenden, wenn ich ihn poste.

Bei der Webentwicklung sollten Sie der Benutzererfahrung mehr Aufmerksamkeit schenken. Durch die Verwendung einer stärkeren clientseitigen Überprüfung (aus Sicherheitsgründen ist natürlich eine Serverüberprüfung erforderlich) und asynchroner Interaktion kann die Benutzererfahrung effektiv verbessert werden. Nur wenn sich die Nutzer bei der Nutzung wohl fühlen und das, was wir herstellen, gerne nutzen, kann unsere Arbeit sinnvoll sein. Unser Ziel ist es, die Nutzer zufrieden zu stellen.

Die verschiedenen Eingabeaufforderungen auf der Seite sind sehr kleine Details. Wenn sie gut gemacht sind, können sie Ihnen mehr Benutzer bringen , sie werden Ihnen möglicherweise nicht mehr verwendet. Programmierer achten auf Details, damit Benutzer sich in das Web-Erlebnis verlieben!

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zum Empfangen von JOSN-Daten mit JOSNP in Ajax

Was ist ein eleganter Lösung für Front-End-Ajax-Anfrage Realize

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Ajax, um asynchron zu prüfen, ob der Benutzername doppelt vorhanden ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!