Heim > Artikel > Web-Frontend > Die Priorität der Ajax-Ausführung in jquery_jquery
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?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?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
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.