Ajustement de l'ordre d'exécution Ajax dans jquery

Cette fois je vais vous apporter l'ajustement de l'ordre d'exécution ajax en jquery. Quelles sont les précautions pour ajuster l'ordre d'exécution ajax en jquery Voici un cas pratique, jetons un oeil.

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?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. Si le format est correct, alors 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 a directement exécuté alert('success'), puis exécuté 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 la première fonction, puis effectue une requête. Lorsque le résultat de la requête est reçu, il sera renvoyé à l'utilisateur en appelant la 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?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 ça, 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. Vous pouvez vous référer aux didacticiels 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

Copiez le code Le code est le suivant :

--Exécuter l'appel de fonction--Vérification régulière--Initier ajax--Rappel de fonction ajax
                                                                     |>
Si vous souhaitez que la fonction revienne après le rappel ajax, vous pouvez modifier le modèle ci-dessus, par exemple :

Copiez le code

Le code est le suivant :

-- Exécuter l'appel de fonction -- vérification régulière -- lancer ajax rappel - retour de la fonction                                                                                       Cela peut être obtenu en modifiant si jquery lance ajax de manière asynchrone ou de manière synchrone !

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 :

Un résumé des avantages et des inconvénients d'Ajax

$('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;
  }
  //验证用户名是否被注册
  var ajaxCheckUser = false;
  $.ajax({
    type: "POST",
    url: "register.php?act=checkUser",
    data: {username:$(this).val()},
    // 注意这里
    async:false
    success: function(data){
    if(data.status == 'error') {
      $('input[name="username"]').siblings('.desc').html('<font style="color:red;">'+data.info+'</font>');
      //return false;
    } else {
      ajaxCheckUser = true;
    }
  },'json');
  
  if(ajaxCheckUser) {
    //成功
    alert('成功');
    //$(this).siblings('.desc').html('<img src="./public/images/ok.gif" />');
  }
  
});

Quelles sont les étapes pour mettre en œuvre facilement un fichier télécharger avec ajax+html

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!