La priorité d'exécution ajax dans jquery_jquery

Lors de l'enregistrement des utilisateurs aujourd'hui : j'ai trouvé un problème étrange, veuillez regarder le code :

$('input[name="username"]').blur(function(){
    //验证格式
    var pattern = /^[a-z][\w]{4,11}$/i;
    if(!pattern.test($(this).val())) {
      $(this).siblings('.desc').html('<font style="color:red;">5-12个字符，必须以字母开头，只能输入数字，字母和下划线</font>');
      return false;
    }
    //验证用户名是否被注册
    $.post('register.php&#63;act=checkUser',{username:$(this).val()},function(data){
      if(data.status == 'error') {
        $('input[name="username"]').siblings('.desc').html('<font style="color:red;">'+data.info+'</font>');
        return false;
      }
    },'json');
    
    //成功
 alert('成功');
    //$(this).siblings('.desc').html('<img src="./public/images/ok.gif" />');
  });

Logiquement parlant, le format ci-dessus est

1. Vérifiez si le nom d'utilisateur est conforme au format
2. Le format est correct puis AJAX détermine si le nom d'utilisateur est occupé,
3. Si les deux réussissent, l'icône correcte s'affichera,

Mais le problème est qu'après avoir vérifié avec succès le format utilisateur, il exécute directement alert('success'), puis exécute ajax. Pourquoi est-ce ? Est-ce un problème de temps avec l'exécution d'Ajax ? Ou autre chose ? ? ?

Voici le code PHP :

if($_GET['act'] == 'checkUser') {
  if($_SERVER['HTTP_X_REQUESTED_WITH'] !== 'XMLHttpRequest') exit('非法操作！！！');

  $sql = "SELECT id FROM {$sys_vars['db_pre']}user WHERE username='{$_POST['username']}'";
  
  $result = mysql_query($sql);
  $data = mysql_fetch_assoc($result);
  if ($data) {
    exit(json_encode(array('status'=>'error','info'=>'该用户名已被注册！！！')));
  }else{
    exit(json_encode(array('status'=>'success')));
  }
}

L'analyse est la suivante

ajax est une opération asynchrone. Lors de l'exécution de fonctions liées à ajax, le système renvoie d'abord la fonction puis effectue une requête lorsque le résultat de la requête est reçu, il sera renvoyé à l'utilisateur en appelant une fonction de rappel.

$('input[name="username"]').blur(function(){
    //验证格式
    var pattern = /^[a-z][\w]{4,11}$/i;
    if(!pattern.test($(this).val())) {
      $(this).siblings('.desc').html('<font style="color:red;">5-12个字符，必须以字母开头，只能输入数字，字母和下划线</font>');
      return false;
    }
    //验证用户名是否被注册
    $.post('register.php&#63;act=checkUser',{username:$(this).val()},function(data){
      if(data.status == 'error') {
        $('input[name="username"]').siblings('.desc').html('<font style="color:red;">'+data.info+'</font>');
        return false;
      }
    },
    function(data){  //对于post函数，第三个参数为回调函数
      alert('成功');
    }
    ,'json');
    
    //成功
 //alert('成功');
    //$(this).siblings('.desc').html('<img src="./public/images/ok.gif" />');
  });

Modifiez-le comme ceci, essayez-le et ressentez la différence.
Différentes fonctions ajax ont des méthodes d'utilisation légèrement différentes de leurs fonctions de rappel. Veuillez vous référer au didacticiel w3school ou au site officiel de jQuery.

Il s'agit en fait d'un problème de synchronisation et d'asynchronisme de js. S'il est asynchrone, vous pouvez imaginer deux lignes

Copier le code Le code est le suivant :

--Exécuter l'appel de fonction--Vérification régulière--Initier ajax--La fonction renvoie le rappel ajax
                                                                                                        Requête du navigateur - traitement php - le navigateur reçoit le résultat

Si vous souhaitez que la fonction revienne après le rappel ajax, vous pouvez modifier le modèle ci-dessus, par exemple :

Copier le code Le code est le suivant :

--Exécuter l'appel de fonction--Vérification régulière--Initier le rappel ajax        Ajax—Retour de fonction

                                                                                                        Requête du navigateur - traitement php - le navigateur reçoit le résultat



Ceci peut être réalisé en modifiant si jquery lance ajax de manière asynchrone ou synchrone !

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.