Anpassung der Ajax-Ausführungsreihenfolge in JQuery

Dieses Mal werde ich Ihnen die Anpassung der Ajax-Ausführungsreihenfolge in JQuery vorstellen. Was sind die Vorsichtsmaßnahmen zum Anpassen der Ajax-Ausführungsreihenfolge in JQuery?

Bei der heutigen Benutzerregistrierung: Ich habe ein seltsames Problem festgestellt. Schauen Sie sich bitte den Code an:

$('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" />');
  });

Logisch gesehen ist das obige Format

1. Überprüfen Sie, ob der Benutzername dem Format entspricht
2. Das Format ist korrekt und dann ermittelt AJAX, ob der Benutzername belegt ist
3. Wenn beides erfolgreich ist, wird das richtige Symbol angezeigt

Aber das Problem ist, dass ich nach erfolgreicher Benutzerformatierung direkt eine Warnung ('Erfolg') ausführe und dann Ajax ausführe. Ist es ein Zeitproblem bei der Ajax-Ausführung? Oder etwas anderes? ? ?

Dies ist der PHP-Code:

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

Die Analyse ist wie folgt

Ajax ist eine asynchrone Operation, die Das System gibt die Funktion zuerst zurück, stellt erneut eine Anfrage, und wenn das Anfrageergebnis empfangen wird, wird es durch Aufrufen der Rückruffunktion an den Benutzer zurückgegeben.

$('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" />');
  });

Ändern Sie es so, probieren Sie es aus und spüren Sie den Unterschied.
Verschiedene Ajax-Funktionen verwenden leicht unterschiedliche Methoden zur Verwendung ihrer Rückruffunktionen. Weitere Informationen finden Sie in den Tutorials von w3school oder auf der offiziellen jQuery-Website.

Dies ist tatsächlich ein Problem der Synchronisation und Asynchronität von js. Wenn es asynchron ist, können Sie sich zwei Zeilen vorstellen

Kopieren Sie den Code Der Code lautet wie folgt:

--Funktionsaufruf ausführen--Regelmäßige Überprüfung--Ajax initiieren--Funktionsrückruf zurückgeben
                                                         |. >
Wenn Sie möchten, dass die Funktion nach dem Ajax-Rückruf zurückkehrt, können Sie dies ändern Das obige Modell, zum Beispiel:

Kopieren Sie den Code

Der Code lautet wie folgt:

-- Funktionsaufruf ausführen – regelmäßige Überprüfung – Ajax initiieren callback--function return

                                                                                Dies kann erreicht werden, indem geändert wird, ob JQuery Ajax asynchron oder synchron initiiert!

$('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" />');
  }
  
});

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:

Zusammenfassung der Vor- und Nachteile von Ajax

Was sind die Schritte, um das Hochladen von Dateien einfach zu implementieren? mit Ajax+HTML

Das obige ist der detaillierte Inhalt vonAnpassung der Ajax-Ausführungsreihenfolge in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!