jqueryでのAjax実行順序調整-jsチュートリアル-php.cn

jqueryでのAjax実行順序調整

php中世界最好的语言

リリース： 2018-04-24 17:08:21

オリジナル

2375 人が閲覧しました

今回は、jqueryでのajaxの実行順序の調整についてお届けします。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?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の形式に準拠しているかどうかを確認してください。が正しい場合は、AJAX ユーザー名が占有されているかどうかを判断します
3. 成功すると、正しいアイコンが表示されます

しかし、問題は、ユーザー形式の検証が成功した後、それが直接実行されることです。 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関連の関数を実行するとき、システムは最初に関数を返し、次にリクエストの結果が返されたときにリクエストを作成します。受信すると、コールバック関数が呼び出されます

がユーザーに返されます。

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

ログイン後にコピー

このように変更して、試してみて違いを感じてください。

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

これは実はjsの同期と非同期の問題で、非同期なら2行くらい想像できます

コードをコピー

コードは以下の通りです

--関数呼び出しを実行--定期検証- -initiate ajax--function AJAX コールバックに戻ります。

|
ブラウザー要求 - PHP 処理 - ブラウザーが結果を受け取ります

関数が AJAX コールバックに返される場合、次のようにモデルを変更できます。 copeコードのコピーcodeコードは次のとおりです。

- execute function call--規則的な検証 - イベントAjaxこれは、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;
  }
  //验证用户名是否被注册
  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" />');
  }
  
});

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。推奨読書:

Ajax の長所と短所のまとめ

ajax+html ファイルを簡単にアップロードする手順は何ですか

以上がjqueryでのAjax実行順序調整の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。