The priority of ajax execution in jquery_jquery

When doing user registration today: I found a strange problem, please look at the 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" />');
  });

Logically speaking, the above format is

1. Verify whether the username conforms to the format
2. The format is correct and then AJAX determines whether the user name is occupied,
3. If both are successful, the correct icon will be displayed,

But the problem is that after I successfully verify the user format, it executes alert('success') directly, and then executes ajax. Why is this? Is it a time issue with ajax execution? Or something else? ? ?

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

The analysis is as follows

ajax is an asynchronous operation. When executing ajax-related functions, the system first returns the function and then makes a request. When the request result is received, it will be returned to the user by calling a callback function.

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

Modify it like this, try it and feel the difference.
Different ajax functions have slightly different usage methods of their callback functions. Please refer to the w3school tutorial or the jQuery official website.

This is actually a problem of synchronization and asynchronousness of js. If it is asynchronous, you can imagine two lines

Copy code The code is as follows:

--Execute function call--Regular verification--Initiate ajax--Function return ajax callback
                                                                                                        Browser request--php processing--browser receives the result

If you want the function to return after the ajax callback, you can change the above model, for example:

Copy code The code is as follows:

--Execute function call--Regular verification--Initiate ajax        Ajax callback—Function return

                                                                                                        Browser request--php processing--browser receives the result



This can be achieved by modifying whether jquery initiates ajax asynchronously or synchronously!

The above is the entire content of this article, I hope you all like it.