사용자 이름 유효성 검사에 대한 JQuery .ajax()

Question

다음 코드로 사용자 이름이 존재하는지 여부를 확인하려고했습니다. 그러나 그것은 어떻게 든 기존 사용자 이름을 막기 위해 작동하지 않습니다. ** 참고 : checkusr2.php는 데이터베이스의 사용자 이름을 확인하는 간단한 PHP입니다.

function verifyUser() { 
    var usr = $("#username").val(); 
    $.ajax({ 
     type: "POST", 
     url: "checkusr2.php", 
     data: "username="+ usr, 
     success: function(msg) { 
      $("#txtHint").ajaxComplete(function(event, request, settings){ 
       FormErrors = false; 
       if(msg == 'OK') { 
        FormErrors = true; 
        $('#formElem').data('username',FormErrors); 
       } else { 
        $('#formElem').data('username',FormErrors); 
       } 
      }); 
     } 
    }); 
} 

/** 확인할 기능을 호출합니다. **/

verifyUser(); 
if($('#formElem').data('username')){ 
    alert('Username exist, please try another username.'); 
    return false; 
} 

Answer 1

Charles, Fiddler, WireShark 등과 같은 http 프록시를 사용하여 보내는 아약스 요청을보고 응답이 예상 한 내용인지 확인하십시오.

비동기 호출 (Ajax의 A)을 사용하여 사용자 이름 존재 여부에 대한 응답을 얻습니다. verifyUser를 호출하자 마자 verifyUser 호출이 호출 된 직후에 checkusr2.php에 대한 요청이 실제로 반환 될 수도 그렇지 않을 수도 있습니다.

성공 처리기 안에 ajaxComplete 세트가있는 것을 본 적이 없습니다. 난 당신이 다음과 같이 변경 할 수 있습니다 생각 :

function verifyUser() { 
    var usr = $("#username").val(); 
    $.ajax({ 
     type: "POST", 
     url: "checkusr2.php", 
     data: "username="+ usr, 
     success: function(msg) { 
      if(msg != 'OK') { 
       alert('Username exists, please try another username.'); 
       $("#username").val(""); 
      } 
     }; 

    }); 
} 

Answer 2

문제는 verifyUser를 동 기적으로 사용하는 데 있습니다. 코드는 상당히 들리지만 문제는 $ .ajax가 XMLHTTPRequest를 사용하여 비동기 적으로 실행된다는 것입니다. 즉, verifyUser를 호출 한 직후의 코드는 완료의 부작용에 의존 할 수 없습니다.

당신이해야 할 일은 verifyUser 콜백을 먼저 실행하는 것입니다 (예를 들어, 사용자가 사용자 이름 필드에 포커스를 맞추지 않은 경우처럼). 그러면 제출할 시간이되면 이미 결과가 나타납니다. 예를 들어

: 또 다른 변화가 대신 제출 방지 될 것

$('#username').blur(function() { verifyUser() }); 

, 당신은 사용자 이름이 무효 인 경우에 verifyUser 옆에 필드에 메시지와 함께 사업부를 표시 할 수 있습니다. 당신은 당신의 핸들러에 이러한 변경을 것 :

  if(msg == 'OK') { 
       FormErrors = true; 
       $('#username_invalid').show(); 
      } else { 
       $('#username_invalid').hide(); 
      } 

이 그럼 당신은 자신의 시간을 제출을 낭비하지 않고 사용자 이름이 바로 선택 할 수없는 사용자를 보여줄 수 있습니다.

Answer 3

내가 알고 있지 않습니다 .ajaxComplete()을 데리고이

$("#txtHint").ajaxComplete(function(e, xhr, settings) { 
    if (settings.url == 'ajax/test.html' && xhr.responseHTML=="Ok") { 
       FormErrors = true; 
       $('#formElem').data('username',FormErrors); 
      } else { 
       $('#formElem').data('username',FormErrors); 
      } 
}) 

Answer 4

감사를 사용해보십시오. 나는 그것이 미래에 나에게 큰 도움이 될 것이라고 생각한다.
어쨌든 나는 당신이 특정한 경우에 사용할 것을 생각하지 않습니다 :

function verifyUser() { 
    var usr = $("#username").val(); 
    $.ajax({ 
    type: "POST", 
    url: "checkusr2.php", 
    data: {'username':usr}, 
    success: function(msg) { 
     if (msg != 'OK') { 
     alert('Username exist, please try another username.'); 
     return false; 
     } 
    }); 
    }); 
} 

는 Ajax 호출이 아약스 기능의 콜백으로 전달해야합니다 후 실행하고자하는 기능, 그렇지 않으면 , Ajax 함수 다음에 추가하더라도 서버의 응답 전에 실행됩니다.