ユーザー名検証のための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リクエストを表示し、応答が期待どおりであることを確認します。

一方、非同期呼び出し（AjaxではA）を使用して、ユーザー名が存在するかどうかの応答を取得しています。 checkUserを呼び出した直後に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は、次のフィールドへのメッセージを持つdiv要素を表示することができます。あなたのハンドラにこれらの変更を行いたい：

  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

感謝を（）してみてください。私はあなたがこのようにそれを変更するかもしれないと思います。私は将来私にとって大きな助けになると思う。
しかし、いずれにせよ、私はそれはあなたがこの特定のケースで使用するものだとは思わない：あなたはAjax呼び出しがそうでなければ、Ajaxの機能のコールバックとして渡す必要があります後に実行したい

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関数の後に置いても、サーバの応答の前に実行されます。