Comment utiliser Ajax pour vérifier de manière asynchrone si le nom d'utilisateur est dupliqué

Cette fois, je vais vous montrer comment utiliser Ajax pour vérifier de manière asynchrone si le nom d'utilisateur est dupliqué. Quelles sont les précautions concernant l'utilisation d'Ajax pour vérifier de manière asynchrone si le nom d'utilisateur est dupliqué. Voici une méthode pratique. cas. Jetons un coup d'oeil.

Lors de l'enregistrement d'un utilisateur sur un site Web, il vérifiera si l'utilisateur existe déjà. Il y a longtemps, la méthode de traitement consistait à soumettre toutes les données au serveur pour vérification. Évidemment, l'expérience utilisateur de cette méthode était très mauvaise plus tard, avec Ajax et l'interaction asynchrone, lorsque l'utilisateur avait fini de saisir le nom d'utilisateur et continuait à le faire. remplissez d'autres informations, Ajax envoie les informations au serveur pour vérifier si le nom d'utilisateur a été enregistré, de sorte que si le nom d'utilisateur existe déjà, une invite peut être donnée sans attendre que l'utilisateur soumette toutes les données. L'utilisation de cette méthode améliore grandement l'expérience utilisateur. Aujourd'hui, je vais vous parler de cette méthode d'interaction.

Ce qui suit consiste à utiliser JS pour obtenir l'ID utilisateur, puis à l'envoyer à la page user_validate.jsp, puis à recevoir le message renvoyé par la page via la méthode de rappel et à en informer l'utilisateur.

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); 
    } 
  } 
}

La page user_validate.jsp reçoit l'ID utilisateur et demande s'il existe en fonction de l'ID. S'il existe, il sera renvoyé. S'il n'existe pas, rien ne sera renvoyé.

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

La méthode de vérification est déclenchée lorsque le curseur quitte la zone de texte du code utilisateur.

Copier le code Le code est le suivant :

Rendu

À propos de comment en fonction de l'utilisateur, je ne publierai pas le code pour demander si l'ID existe déjà, car c'est trop simple et j'ai peur de gaspiller la bande passante de tout le monde si je le publie.

Lorsque vous faites du développement Web, vous devez accorder plus d'attention à l'expérience utilisateur. L'utilisation de davantage de vérifications côté client (bien sûr, une vérification du serveur est requise pour des raisons de sécurité) et d'une interaction asynchrone peut améliorer efficacement l'expérience utilisateur. Ce n'est que lorsque les utilisateurs se sentent à l'aise et aiment utiliser ce que nous créons que notre travail aura un sens. Notre objectif est de satisfaire les utilisateurs.

Les détails déterminent le succès ou l'échec. Les différentes invites sur la page sont de très petits détails. Ne sous-estimez pas ces petits détails s'ils sont bien faits, ils peuvent vous apporter plus d'utilisateurs ; , ils peuvent vous apporter des utilisateurs. Les programmeurs prêtent attention aux détails pour que les utilisateurs tombent amoureux de l'expérience Web !

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour recevoir des données josn à l'aide de josnp en ajax

Qu'est-ce qu'un élégant solution pour requête ajax front-end Réaliser

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!