JavaScriptフォームでPHPに値を送信して取得します

Question

私は可能な限り明確になるよう努めています。

基本的には、HTMLページでのみJavaScriptを使用してログインする必要があります。これはhtmlページのみを使用する必要があるためです。私は以下のようなHTMLフォームを持っている：

<form id="privateform" method="post" action="post.php"><label>insert password</label> 
    <input type="password" id="password" name="password"> 
    <input type="submit" value="Login"> 
</form> 

私があれば（パスワードが送信=== PHPでデータベースから読み込まパスワード）ユーザーがHTMLページに次のページにリダイレクトされていることが必要です。どうすればこれを達成できますか？置く私は私のhtmlページは、JSONファイルとしてPHP結果を保存したい結果.. uは、AJAXを使用する必要があり、このため

Answer 1

まず第一に、次の例

<form id="my-form" method="post" action=""> 
    <label for="username">username</label> 
    <input type="text" name="username" id="username" value="" placeholder="username" required> 
    <label for"password">password</label> 
    <input type="password" name="password" id="password" value="" placeholder="password" required> 
    <button type="submit">send me</button> 
</form> 

に似HTML5フォームを使用します。空の入力要素を使用してフォームを送信することはできません。だからあなたはフォームを検証するためにjavascriptを扱わなければならない。ラベル要素にはfor属性があり、それは所属する入力要素のid属性に適合します。

次は、フォーム要素にJavaScriptイベントリスナーを設定することができます。

<script> 
    var form = document.getElementById('my-form'), 
     password = document.getElementById('password'); 

    form.addEventListener('submit', function(event) { 
     event.preventDefault(); 

     var data = new FormData(form); 

     var xhr = new XMLHttpRequest(); 
     xhr.open('POST', 'https://your.domain.tld/check-password.php'); 
     xhr.onload = function() { 
      if (xhr.status === 200) { 
       // if the response is json encoded 
       var response = JSON.parse(xhr.responseText); 

       if (response.message == 'valid') { 
        // redirect here 
       } 

       if (response.message == 'invalid') { 
        password.setCustomValidity('your password is not correct'); 
       } 
      } 
     } 
     xhr.send(data); 
    }); 
</script> 

この小さなJavaScriptコードは、フォーム要素にサブミットイベントリスナーを設定します。フォームが正常に送信されるとすぐにフォームデータ 'username'と 'password'を 'check-password.php'ファイルに送信するajaxリクエストが発生します。

以下に示すように、あなたがデータにアクセスすることができ、あなたのphpファイルで

：

<?php 
    $username = $_POST['username']; 
    $password = $_POST['password']; 
?> 

あなたはtはjQueryのか、それを行うための任意の他のJavaScriptフレームワークを必要とする」を着用見ることができるように。コード例は例であり、テストされていないことに注意してください。

Answer 2

として抱えているものをので、私はこの

<form onsubmit="false" id="login_form"> 
      <div class="login_box" id="login" method="post"> 
       <legend>LOGIN</legend> 
        <p id="alert"></p> 
        <input type="text" name="username" class="username" id="username" placeholder="USERNAME" required> 

        <input type="password" name="password" class="password" id="password" placeholder="PASSWORD" required> 
        <br> 
        <button type="button" name="login" id="login" class="login" onclick="proceed_login();"> Login </button> 
        <a href="fgotpassword"><input type="button" value="Forgot password ?" id="fp" class="fp"></a> 
      </div> 
       </form> 

のためのjQueryライブラリを使用していますhtmlページ

上のコード上で、その後のJSコードは、ログインURLに

<script> 
function proceed_login() { 
    var username=document.getElementById('username').value; 
    var password=document.getElementById('password').value; 
    var alert=document.getElementById('alert'); 
    alert.innerHTML="processing..."; 
    if(!username || !password){ 

     $("#login_form").effect("shake", {times:2}, 200); 
     alert.innerHTML="please enter username and password"; 
     document.getElementById('login_form').reset(); 

    }else{ 
     $.post("http://yourloginurl", 
      { 
      username: username, 
      password: password 
      }, 
     function(data){ \\ getting the response and parsing and validating it 
     if (data=="ok") { \\ on success response 
      window.location="../dashboard"; 
     }else{ \\ on invalid credentials 
     alert.innerHTML="invalid username or password"; 

     } 
     }); 
    } 
} 
</script> 

であるuは私の場合には要求 への応答を提供する必要があります応答が"ok"
あるJSコードは、応答を処理し、さらなる処理

とバックエンドのPHPコードは

if(isset($_POST['username']) && isset($_POST['password'])){ 

if(checkdatabase($_POST['username'],$_POST['password'])){ \\ function to check values against database 
    \\start the session and set user 
    echo "ok"; 
}else{ 
echo "false"; 
} 

}else{ 
echo "false"; 
} 


public function checkdatabase($username, $password){ 

if exists in database 
return true; 
else 
return false; 
} 

あるか

Answer 3

回答が「のAjaxあるcheckdatabase関数でウルデータベースロジックを書きます"

公式のマニュアルhereがあります。あなたが入力要素が今、必要な属性を持って見ることができるように