Comment implémenter la vérification asynchrone du nom d'utilisateur avec Ajax

Cette fois, je vais vous montrer comment implémenter la vérification asynchrone du nom d'utilisateur avec Ajax. Quelles sont les précautions à prendre pour implémenter la vérification asynchrone du nom d'utilisateur avec Ajax ? Voici un cas pratique, jetons un coup d'oeil.

Jetons d'abord un coup d'oeil à la mise en page. Le rendu est le suivant

fonction ajax :

Lorsque l'utilisateur remplit Lorsque le compte passe à la zone de mot de passe, utilisez ajax pour vérifier la disponibilité du compte. La méthode de vérification est la suivante : créez d'abord un objet XMLHTTPRequest, puis envoyez les informations à vérifier (nom d'utilisateur) au serveur pour vérification, et enfin déterminez si le nom d'utilisateur est disponible en fonction de l'état renvoyé par le serveur.

function checkAccount(){
var xmlhttp;
var name = document.getElementById("account").value;
if (window.XMLHttpRequest)
 xmlhttp=new XMLHttpRequest();
else
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 
xmlhttp.open("GET","login.php?account="+name,true);
xmlhttp.send();
 
xmlhttp.onreadystatechange=function(){
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
  document.getElementById("accountStatus").innerHTML=xmlhttp.responseText;
}

Résultats d'exécution

Implémentation du code

index.html

使用Ajax实现异步登陆验证

账 号：


密 码：

login.php

<?php
  $con = mysqli_connect("localhost","root","GDHL007","sysu");
 
  if(!empty($_GET[&#39;account&#39;])){
    $sql1 = &#39;select * from login where account = "&#39;.$_GET[&#39;account&#39;].&#39;"&#39;;
    //数据库操作
    $result1 = mysqli_query($con,$sql1);
    if(mysqli_num_rows($result1)>0)
      echo '<font style="color:#00FF00;">该用户存在</font>';
    else 
      echo '<font style="color:#FF0000;">该用户不存在</font>';
    mysqli_close($con);
  }else
    echo '<font style="color:#FF0000;">用户名不能为空</font>';
 
?>

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 :

Discussion et recherche sur Ajax

Comment AJAX implémente l'actualisation asynchrone et l'actualisation partielle

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!