jquery_jqueryでのajax実行の優先順位

今日ユーザー登録をするときに、奇妙な問題を見つけました。コードを見てください:

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

論理的に言えば、上記の形式は
です。

1. ユーザー名が
の形式に準拠しているかどうかを確認します。 2. 形式が正しい場合、AJAX はユーザー名が占有されているかどうかを判断します。
3. 両方が成功すると、正しいアイコンが表示されます。

問題は、ユーザー形式の検証に成功した後、alert('success') が直接実行され、その後、ajax が実行されることです。これはなぜでしょうか。 ajax実行の時間の問題でしょうか？それとも何か別のものでしょうか？ ? ?

これは PHP コードです:

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

分析は次のとおりです

ajax は非同期操作です。ajax 関連の関数を実行すると、システムは最初に関数を返し、次にリクエスト結果を受け取ると、コールバック関数を呼び出してユーザーに返します。

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

次のように変更して、試してみて違いを感じてください。
ajax関数ごとにコールバック関数の使用方法が若干異なりますので、w3schoolチュートリアルまたはjQuery公式Webサイトを参照してください。

これは実際には js の同期と非同期の問題で、非同期の場合は 2 つの行が想像できます。

コードをコピーします コードは次のとおりです:

--関数呼び出しを実行--定期的な検証--ajaxを開始--関数がajaxコールバックを返す
                                                                                                        ブラウザリクエスト--php処理--ブラウザが結果を受け取る

ajax コールバックの後に関数が返されるようにしたい場合は、上記のモデルを変更できます。例:

コードをコピーします コードは次のとおりです:

--関数呼び出しの実行--定期検証--ajaxの開始 Ajaxコールバック—関数リターン

                                                                                                        ブラウザリクエスト--php処理--ブラウザが結果を受け取る



これは、jquery が ajax を非同期で開始するか同期的に開始するかを変更することで実現できます。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。