ajaxレスポンスに従って関数を実行する

Question

登録プロセスを完了する前にユーザー名または電子メールが登録されているかどうかを確認するためにonBlurと呼ばれる2つの関数があります。

これらは、私は、ボタンのデータベースへのユーザデータを送信するために提出する上で実行されます第三の機能を持っている2つの機能

function checkname() { 
    jQuery.ajax({ 
     url: "includes/check_signup.php", 
     data:'username='+$("#name").val(), 
     type: "POST", 
     success:function(data){ 
      $("#error").html(data); 
     }, 
     error:function(){} 
    }); 
} 

function checkemail() 
{ 
    jQuery.ajax({ 
     url: "includes/check_signup.php", 
     data:'email='+$("#email").val(), 
     type: "POST", 
     success:function(data){ 
      $("#error").html(data); 
     }, 
     error:function(){} 
    }); 
} 

です。上記の関数のどれかが "username/emailがすでに登録されています"という成功を返した場合、その関数が実行されないようにするにはどうしたらいいですか？

これは

$('#btn-signup').click(function(){ 
    $.post( 
     $('#register-form').attr('action'), 
     $('#register-form :input').serializeArray(), 
     function(result){ 
      $('#result').html(result); 
     } 
    ); 
}); 

Answer 1

が==「ブロックされた）あなたはクラスresult_emailとresult_nameとDOMオブジェクトを持っており、もともとの両方が（.textセクションが含まれている想像し、あなたが望むトラフィックを制御するためにセマフォを使用して、第三の機能でありますしたがって、「

$('#btn-signup').click(function() { 
    if(!$(".result_email").text() && !$(".result_name").text()) { 
     $.post(
      // etc 
     ); 
    } else { 
     $("#error").focus(); 
    } 
}); 

のいずれかの呼び出しが成功した場合、つまりユーザー名かメールが既に存在している、我々は登録ボタンのクリックイベントをブロックすることでセマフォを回しますが、チェック方法が再び呼び出された場合、それが失敗し、名前または電子メールで登録しても問題ありませんセマフォからブロックを削除します。

function checkemail() { 
    jQuery.ajax({ 
     url: "includes/check_signup.php", 
     data:'email='+$("#email").val(), 
     type: "POST", 
     success:function(data){ 
      $(".result_email").text("blocked") 
      $("#error").html(data); 
     }, 
     error:function(){ 
      $(".result_email").text("") 
     } 
    }); 
} 

function checkname() { 
    jQuery.ajax({ 
     url: "includes/check_signup.php", 
     data:'username='+$("#name").val(), 
     type: "POST", 
     success:function(data){ 
      $(".result_name").text("blocked") 
      $("#error").html(data); 
     }, 
     error:function(){ 
      $(".result_name").text("") 
     } 
    }); 
} 

JSでグローバル変数を使用することもできますが、DOM要素IMOを使用する方が適切です。

Answer 2

2つのフィールドチェックは、フィールドの 'onBlur'または送信前に行い、ユーザーを追加するだけです。

$("#name").on("blur",checkname); 

checkNameの成功では、さらにフラグnameValid = trueを設定できます。あなたが行うことができます

こうして同様

function checkname() { 
    jQuery.ajax({ 
     url: "includes/check_signup.php", 
     data:'username='+$("#name").val(), 
     type: "POST", 
     success:function(data){ 
      nameValid = false; 
     }, 
     error:function(){ 
      nameValid = true; 
     } 
    }); 
} 

に、あなたはemailValidフラグを設定する

$("#email").on("blur",checkemail); 

を与えることができます。ユーザーが値をクリック/入力してフィールドを終了したときに呼び出されるため、通常はぼかしを使用します。

送信ボタンでは、2つのフラグをチェックして、両方のフラグがtrueの場合にのみ呼び出すことができます。

$('#btn-signup').click(function() { 
    if (nameValid && emailValid) { 
     if(!$(".result").text()) { 
     $.post( 
      // etc 
     ); 
    } else { 
     $("#error").focus(); 
    } 
    } 
}); 

また、最初のチェックの成功に第二のチェックを呼び出して、第二のチェックの成功に提出呼び出し、コールバックチェーンで一緒に提出上の2つのチェックを行うことができます。しかし、これは待ち時間が長くなり、ネストされたコールバックがあまりにも多く（コールバック地獄です）、ユーザー入力時にすぐにインラインでユーザーのフィードバックを与えるのがベストプラクティスです。

Answer 3

これは、全体のコードです：成功AJAX要求リターンの後にコードを置き換えてください

。

それが利用可能だと私はそれ以外の場合は

var isNameAvailable = false; 
 
var isEmailAvailable = false; 
 

 
function checkname() { 
 
    jQuery.ajax({ 
 
    url: "includes/check_signup.php", 
 
    data: 'username=' + $("#name").val(), 
 
    type: "POST", 
 
    success: function(data) { 
 
     $("#error").html(data); 
 

 
     if (parseInt(data) == 0) { 
 
     isNameAvailable = true; 
 
     } else { 
 
     isNameAvailable = false; 
 
     } 
 
    }, 
 
    error: function() { 
 
     console.log("connection error"); 
 
     // for test only 
 
     console.log("Demoooo"); 
 
     isNameAvailable = true; 
 
    } 
 
    }); 
 
} 
 

 
function checkemail() { 
 
    jQuery.ajax({ 
 
    url: "includes/check_signup.php", 
 
    data: 'email=' + $("#email").val(), 
 
    type: "POST", 
 
    success: function(data) { 
 
     $("#error").html(data); 
 

 
     if (parseInt(data) == 0) { 
 
     isEmailAvailable = true; 
 
     } else { 
 
     isEmailAvailable = false; 
 
     } 
 
    }, 
 
    error: function() { 
 
     console.log("connection error"); 
 
     // for test only 
 
     console.log("Demoooo"); 
 
     isEmailAvailable = true; 
 
    } 
 
    }); 
 
} 
 

 
$('#btn-signup').click(function(event) { 
 
    event.preventDefault(); 
 
    if (!isNameAvailable || !isEmailAvailable) { 
 
    console.log("check username and email"); 
 
    return; 
 
    } 
 
    console.log("Success ..."); 
 
    $.post(
 
    $('#register-form').attr('action'), 
 
    $('#register-form :input').serializeArray(), 
 
    function(result) { 
 
     $('#result').html(result); 
 
    } 
 
); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    username: <input type="text" name="name" id="name" onblur="checkname()" /> 
 
    email: <input type="text" name="email" id="email" onblur="checkemail()" /> 
 
    <br /> 
 
    <br /> 
 
    <input type="submit" name="submit" id="btn-signup" value="Submit" /> 
 
</form>