jQuery AJAX가 DOM 요소에 액세스하는 것보다 느리다.

Question

AJAX와 jQuery에서 사용할 수있는 사용자 이름인지 확인하고 싶다.

이

은

(function($){ 
$(document).ready(function(){ 
    $('#new_username').blur(function() { 
     var newUsername = $(this).val(); 

     $.post('../registration/check-username.php', 
      { 
       newUsername : newUsername 
      }, function (data) { 
       $('#information').html(data); 
      } 
     ); 
    }); 

    if($("#information").html() != "") { 
     $("#sign-up").attr('disabled', 'disabled'); 
    } else { 
     $("#sign-up").removeAttr("disabled"); 
    }  
}); 
})(jQuery); 

어떤 문제가 있다면 아약스

와 JQuery와 일부 여기에 등록 입력 필드

 <tr> 
      <td><input type = "text" id ="new_username"/></td> 
     </tr> 
     <tr> 
     <td></td> 
     <td id ="information"></td> 
    </tr> 
    <input type = "submit" id = "sign-up" value = "Sign up" /> 

이다 -은 "정보는"TD는 일부 오류 메시지를 가져옵니다. 사용자 이름이 비어 있으면 비어 있으며 알림도 표시되지 않습니다. 문제는 아약스가 응답하는 데 다소 시간이 걸리고 어딘가를 클릭하는 것이 더 빠르다는 것입니다. 이는 정확하지 않은 검사를 유발합니다. 당신이 내 질문을 이해한다면 어떤 생각?

Answer 1

$.post은 비동기 요청이므로 서버에 사용자 요청을 확인하기 위해 요청을 보내면 스크립트 실행이 계속됩니다. 귀하의 경우 이것은 서버가 응답하기 전에 if 조건이 실행될 것이라는 것을 의미하므로 콜백 메소드 내에서 if 조건을 해결하는 것이 해결책입니다.

, 당신은 AJAX 응답이 돌아 오기를 기다릴 필요가

(function($){ 
    $(document).ready(function(){ 
     $('#new_username').blur(function() { 
      var newUsername = $(this).val(); 

      $.post('../registration/check-username.php', 
        { 
         newUsername : newUsername 
        }, function (data) { 
         $('#information').html(data); 

         $("#sign-up").prop('disabled', data != ""); 
        } 
       ); 
     });   
    }); 
})(jQuery); 

Answer 2

자네 말이 맞아보십시오

또한 장애인 등록 정보를 수정합니다 .prop() 방법을 사용하는 것이 좋습니다. 코드를 완전히 리팩토링하지 않으면 응답이 반환 된 후 수표를 확인하십시오. 맞습니다. AJAX 응답이 다시 오기를 기다려야합니다. 코드를 완전히 리팩토링하지 않으면 응답이 반환 된 후 수표를 확인하십시오.

$.post('../registration/check-username.php', 
    { 
    newUsername : newUsername 
    }, function (data) { 
    $('#information').html(data); 
    }).done(function(){ 
    if($("#information").html() != "") { 
     $("#sign-up").attr('disabled', 'disabled'); 
    } else { 
     $("#sign-up").removeAttr("disabled"); 
    } 
    }); 

Answer 3

입력이 확인되기 전에 사용자가 제출을 클릭 할 수 있음을 말하는 것이므로 "어딘지를 클릭하는 것이 더 빠릅니다"라고 생각합니다. 이 문제를 해결 얻을 수있는 $.ajax()beforeSend 방법을 사용

$(document).ready(function(){ 
    $('#new_username').blur(function() { 
    $.ajax({ 
     url: "../registration/check-username.php", 
     data: { 
     newUsername: $(this).val() 
     }, 
     beforeSend: function() { 
     $("#sign-up").attr("disabled","disabled"); 
     }, 
     success: function(data) { 
     $('#information').html(data); 
     if(!data) 
      $("#sign-up").removeAttr("disabled"); 
     } 
    }); 
    }); 
});