Ajax execution order adjustment in jquery-JS Tutorial-php.cn

Ajax execution order adjustment in jquery

php中世界最好的语言

Release： 2018-04-24 17:08:21

Original

2374 people have browsed it

This time I will bring you the adjustment of the ajax execution order in jquery. What are the precautions for adjusting the ajax execution order in jquery? The following is a practical case, let's take a look.

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

Copy after login

Logically speaking, the above format is

1. Verify whether the username conforms to the format

2. If the format is correct, then AJAX determines whether the username is occupied.
3. If successful, the correct icon will be displayed.

But the problem is when I verify After the user format is successful, it is executed directly, alert('success'), 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')));
  }
}

Copy after login

The analysis is as follows

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

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

Copy after login

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
|
#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 callback--function return | |

Browser request--php processing--browser receives result

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

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

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:

Summary of the advantages and disadvantages of Ajax

##What are the steps to easily upload files with ajax html

The above is the detailed content of Ajax execution order adjustment in jquery. For more information, please follow other related articles on the PHP Chinese website!