javascriptを使用してメイン関数内の子関数から値を返す

Question

私は自分のタイルで自分自身をクリアしたかどうかわかりませんが、混乱していると思いますが、説明しましょう。私は、彼は、AJAXリクエストを送信してログインしようとすると、ユーザーを検証するための機能を持っている上記のコードでは

function validateUserLogin() { 
    'use strict'; 
    var xmlhttp, url = '../controller.php?action=validatelogin', 
    email = document.getElementById('email').value, 
    password = document.getElementById('password').value; 
    if (window.XMLHttpRequest) { 
     xmlhttp = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
     xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); 
    } else { 
     alert('Your browser does not support XMLHTTP!'); 
    } 
    xmlhttp.open('POST', url, true); 
    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 
    xmlhttp.send('email=' + email + '&password=' + password); 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { 
      if (xmlhttp.responseText === 'Error1') { 
       $('#email').css('border', '1px solid red'); 
       //A value to return 
      } 
      if (xmlhttp.responseText === 'Error2') { 
       $('#email').css('border', '1px solid green'); 
       $('#password').css('border', '1px solid red'); 
       //A value to return 
      } 
     } 
    }; 
    //I want it here 
} 

： は、だから私はそのjsのコードを持っています。サーバー側のスクリプトでは、電子メールまたはパスワードが正しくないときにメッセージを表示し、入力の境界線の色を緑または赤に変更します。ここまでは順調ですね。私が望むのは、2つのifsから変数を返すことです。子関数の中にvalidateUserLoginを入れて、trueまたはfalseをログインフォームに返します。それも可能ですか？

Answer 1

以前に宣言されたvar？ （storedここをクリック）

xmlhttp.open('POST', url, false);を使用すると、同期要求として送信できます。

あなたの.onreadystatechangeをロードリスナーで置き換えました。このフィドルで私のために働いています：https://jsfiddle.net/1ma3svcd/ PHPファイルは単に 'Error1'を返します。あなたがすることができないため

var xmlhttp; 

function validateUserLogin() { 
    'use strict'; 
    var stored; 
    var url = 'https://zenoo.fr/testAjax.php', 
    email = 'test@test.tes', 
    password = 'testMe'; 
    if (window.XMLHttpRequest) { 
     xmlhttp = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
     xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); 
    } else { 
     alert('Your browser does not support XMLHTTP!'); 
    } 

    xmlhttp.addEventListener("load", transferComplete, false); 
    xmlhttp.open('POST', url, false); 
    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 
    xmlhttp.send('email=' + email + '&password=' + password); 
} 

function transferComplete(){ 
     if (xmlhttp.responseText === 'Error1') { 
     $('#email').css('border', '1px solid red'); 
     stored=true; 
     } 
     if (xmlhttp.responseText === 'Error2') { 
     $('#email').css('border', '1px solid green'); 
     $('#password').css('border', '1px solid red'); 
     stored=false; 
     } 

     console.log(stored); 
} 


validateUserLogin(); 

Answer 2

@Zenooの答えは動作しません：アヤックスは、あなたが（「私はそこにそれをしたい//」）最後の行に到達したときにブラウザがおそらく既に送信されていないことを意味し、非同期でありますAjaxリクエスト。

あなたはHttpRequestのは非同期であるため、それが不可能であるコールバック関数

Answer 3

を渡すことができます。これは、関数が値を返す前に完了するのを待つことを意味します。

ここで達成しようとしていることはわかりませんが、validateUserLogin()というメソッドがフォームのonsubmitハンドラ内で使用されていると思われます。

その場合は、その後、私はあなたが代わりに

EXイベントリスナーを使用することをお勧めします： `XMLHTTP：

var form = document.getElementById('login-form'); 
form.addEventListener('submit', function(e){ 
    // Prevent form from loading the page (submit) 
    e.preventDefault(); 

    // Then call your function here 
    // If user was logged in without errors, 
    // You can use in your function "window.location.href = 'http://mywebapp.dev/dashboard'" 
    validateLogin(); 
});