Jquery의 Ajax 실행 순서 조정

이번에는 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. 사용자 이름이
2 형식을 따르는지 확인합니다.
3.성공하면 올바른 아이콘이 표시됩니다.

그런데 문제는 사용자 형식을 성공적으로 확인한 후에 바로 실행된다는 것입니다. 성공')을 입력한 다음 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?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 콜백으로 돌아가기 j | , 예:


코드 복사

코드는 다음과 같습니다.

--함수 호출 실행--정기 확인--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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:


Ajax의 장점과 단점 요약

ajax+html 파일을 쉽게 업로드하는 단계는 무엇입니까

위 내용은 Jquery의 Ajax 실행 순서 조정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!