返信Falseは内部で動作しません。jQuery.ajax

Question

私はユーザー情報を更新するためのWebフォームを持っています。彼の電子メールを更新すると、ajax()で検証が行われます。そのため、新しい電子メールアドレスがすでに別のユーザーによって使用されているかどうか警告されます。

電子メールの使用中にフォーム提出をキャンセルしようとしていますが、return false;は機能しません。

ifステートメント内のその他のreturn false;は正常に動作していますが、この問題はjQuery.ajax()コール内の問題でのみ発生します。ここで

は、実際のコードです：

var email = jQuery('#email').val(); 
jQuery.ajax({ 
    type : 'GET', 
    url : '/ajax/verify-email.php?email=' + email, 
    success : function(d) { 
     if(d == '1') { 
      alert('Another user is using this email'); 
      jQuery('input[name="email"]').focus(); 
      return false; // this guy over here is not working!!!! 
     } 
    } 
}); 

誰もが解決策を持っていますか？

Answer 1

AJAXのAは実際には非常に重要です。それは非同期の略です。これは、サーバーへの要求をトリガーし、処理に時間がかかることがあり、後で応答を受け取ることを意味します。この応答はsuccessコールバックの内部で発生します。しかし、これは実際のフォーム提出よりもずっと遅れて起こるので、フォームは実際に返信される前に既に提出されています。だから、AJAXの成功のコールバックからfalseを返すことは全く意味をなさない。あなたがしたいのはフォームのサブミットハンドラからfalseを返すことです。これをどのように実装できるかを見てみましょう。

成功AJAXコールバック内のフォームの送信をトリガし、手動で取られていない場合は、フォームの.submitハンドラを購読し、電子メールが既に取られているか否かを確認するために、AJAXリクエストを送信し、できます

$('form').submit(function() { 
    // we send an AJAX request to validate the unicity of the email 
    $.ajax({ 
     url: '/ajax/verify-email.php', 
     type: 'POST', 
     data: { email: $('#email').val() }, 
     // we set the context to the form so that inside 
     // the success callback 'this' points to the form 
     context: this, 
     success: function(result) { 
      if (result != '1') { 
       // If the server send something different than 1 
       // we know that the email is unique and trigger 
       // the submission of the form using the underlying 
       // DOM element to avoid calling the .submit handler 
       // recusrively 
       this.submit(); 
      } else { 
       // The email is not unique => we are informing 
       // the user that the email is already in use 
       alert('Another user is using this email'); 
       $('#email').focus(); 
      } 
     } 
    }); 

    // we cancel the normal submission of the form  
    return false; 
}); 

また、クライアント側の検証には決して依存しません。フォームが正常にサーバーに送信されたら、email is uniqueチェックを実行していることを確認してください。電子メールフィールドの一意の制約で簡単に達成できるSQLデータベースを使用している場合。

Answer 2

ここで非同期コードを実行します。あなたが虚偽を返そうとしている瞬間、それは遅くまでです。関数はすでにundefinedを返しました。成功の結果を処理する場合は、コールバックを提供する必要があります。

Answer 3

あなたは本当にアイデアjQueryを得ていないようですね。 falseを返す必要はありません。あなたはevent.preventDefault();を呼び出すことができます。

$('#form').submit(function(event) { 
    $.get('/ajax/verify-email.php?email=' + $('#email').val(), function(d) { 
     if (d == '1') { 
      alert('Another user is using this email'); 
      $('#email').focus(); 
     } 
    }); 

    event.preventDefault(); 
}); 

はthis exampleを参照してください。

Answer 4

次のようにevent.preventDefault（）を使用してください。

$('#form').submit(function(event) { 
    $.get('/ajax/verify-email.php?email=' + $('#email').val(), function(d) { 
     if (d == '1') { 
      alert('Another user is using this email'); 
      $('#email').focus(); 
      event.preventDefault(); 
     } 
    }); 
}); 

Answer 5

あなたは、この状況に.submit()を使用する代わりに、.submit()だけ<form>要素に使用されなければならないフラグシステムを使用しないでください。

var email = jQuery('#email').val(); 
var flag = 0; 
jQuery.ajax({ 
    type : 'GET', 
    url : '/ajax/verify-email.php?email=' + email, 
    async: false, 
    success : function(d) { 
     if(d == '1') { 
      alert('Another user is using this email'); 
      jQuery('input[name="email"]').focus(); 
      flag = 1; 
     } 
    } 
}); 
if(flag == 1) return false;