Heim  >  Artikel  >  Web-Frontend  >  Die Priorität der Ajax-Ausführung in jquery_jquery

Die Priorität der Ajax-Ausführung in jquery_jquery

WBOY
WBOYOriginal
2016-05-16 15:53:331606Durchsuche

Bei der heutigen Benutzerregistrierung habe ich ein seltsames Problem festgestellt. Bitte schauen Sie sich 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&#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" />');
  });

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 beide erfolgreich sind, wird das richtige Symbol angezeigt,

Aber das Problem ist, dass nach erfolgreicher Überprüfung des Benutzerformats die Warnung ('Erfolg') direkt und dann Ajax ausgeführt wird. Warum ist das so? 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. Bei der Ausführung von Ajax-bezogenen Funktionen gibt das System zunächst die Funktion zurück und sendet dann eine Anforderung. Wenn das Anforderungsergebnis empfangen wird, wird es durch Aufrufen einer 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&#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" />');
  });

Ändern Sie es so, probieren Sie es aus und spüren Sie den Unterschied.
Verschiedene Ajax-Funktionen haben leicht unterschiedliche Verwendungsmethoden ihrer Rückruffunktionen. Weitere Informationen finden Sie im w3school-Tutorial 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

Code kopieren Der Code lautet wie folgt:

--Funktionsaufruf ausführen --Regelmäßige Überprüfung --Ajax initiieren --Funktion gibt einen Ajax-Rückruf zurück
                                                                                                    Browseranfrage – PHP-Verarbeitung – Browser empfängt das Ergebnis


Wenn Sie möchten, dass die Funktion nach dem Ajax-Rückruf zurückkehrt, können Sie das obige Modell ändern, zum Beispiel:

--Funktionsaufruf ausführen--Regelmäßige Überprüfung--Ajax-Rückruf initiieren        Ajax-Rückruf – Funktionsrückgabe
                                                                                                   Browseranfrage – PHP-Verarbeitung – Browser empfängt das Ergebnis



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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn