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 공식 웹사이트를 참조하세요.

이것은 실제로 js의 동기화와 비동기성의 문제입니다. 비동기식이라면 두 줄을 상상해 볼 수 있습니다

코드 복사 코드는 다음과 같습니다.

--함수 호출 실행--정기 검증--ajax 시작--함수 반환 ajax 콜백
                                                                                                  브라우저 요청--php 처리--브라우저가 결과를 받습니다

Ajax 콜백 후에 함수가 반환되도록 하려면 위 모델을 변경할 수 있습니다. 예를 들면 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

--함수 호출 실행--정기 검증--ajax        Ajax 콜백 시작—함수 반환

                                                                                                  브라우저 요청--php 처리--브라우저가 결과를 받습니다



이는 jquery가 Ajax를 비동기식으로 시작할지 아니면 동기식으로 시작할지 수정하여 달성할 수 있습니다!

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.