今回は、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. 成功すると、正しいアイコンが表示されます
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関数ごとにコールバック関数の使用方法が若干異なりますので、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 サイトの他の関連記事を参照してください。