ログインのためのajaxリクエストの方法

Question

私はこれをPHPコードに入れていますが、現在は同じlogin.phpページでログインリクエストを行いますが、今はAjaxでやりたいと思っています。基本的に私は、私はまだこれを使用するが、私は検証のユーザ名とパスワードを送信し、その後、私はそれを行うことができます<div id=login> to say you are logged in!</div>を変更することができますlogin_request.phpか何かを持っていると思いlogin.php

 echo '<form method="post" ><div id="login" class="login"> 
     <label for="login">User Name</label> 
     <input type="text" name="logInUsername" /> 
     <label for="Password">Password</label> 
     <input type="password" name="logInPassword" /> 
     <input type="submit" value="Submit" name="submitlogin" class="button" /> 
     </div>'; 

でこれを持っています従来の方法では、フォームのポストを使っていますが、今はAjaxで試してみたいと思います。

ご協力いただければ幸いです。

よろしく

Answer 1

とAJAX要求に応答

にログインしていますか？これは私が開始する方法を示します。

は、これはあなたが始める必要があります。

HTML：

<form id="loginForm"> 
    <div id="login" class="login"> 
     <label for="login">User Name</label> 
     <input type="text" name="logInUsername" /> 
     <label for="Password">Password</label> 
     <input type="password" name="logInPassword" /> 
     <input type="button" value="Submit" id="submitlogin" class="button" /> 
    </div> 
</form> 

のjQuery：

$("#submitlogin").click(function() { 
    inputs = //grab then inputs of your form #loginform 
    $.ajax ({ 
     url: "urltoyourloginphp.php", 
     data: inputs, 
     success: function() { 
     $("#login").html("You are now logged in!"); 
    } 
    }); 
}) 

Answer 2

私はそれはかなり完全なAjaxのログイン（すなわち、最後に、それはまだあなたをリダイレクトしない）ではないのですが、それは完全なAjaxのログインのための基礎として役立つことができる、しばらく前にこれを書きました。プラスとして、実際にはhttpsは必要ありません（これはこの小さなプロジェクトの全体の要点でした）。

https://github.com/eberle1080/secure_http_login/blob/master/login.php

高レベルの手順は、このような何かを行く：

• は、Ajaxリクエスト
• ハッシュにSHA1を使用してパスワード+シードを使用してシード値のために（塩）サーバーを依頼しますsum
• サーバーにユーザー名と塩漬け+ハッシュされたパスワードを確認するよう依頼してください。
• 有効な場合、サーバーはセッションCookieを設定しますユーザーは、サーバーがこれまでに試してみました何の成功/失敗メッセージ

Answer 3

jQueryの（.postに組み込まれています）と.serializeフォームをラップするための（）メソッドです。

$.post("login.php", $("#loginForm").serialize(), function(data) { 
    //pass information back in with data. if it's JSON, use $.parseJSON() to parse it. 
    alert('either logged in or errored'); 
); 

ます。また、それは次のように、IDを持っているので、自分のフォームを編集する必要があります（私はPHPを知らないが、あなたに、私はVBScriptのでそれを行っているだろうかの例を与える<form id="loginForm">...

Answer 4

古典的なasp）ので、必要に応じてPHPに適合させようとするかもしれません。

私のアプリケーションでは、最初にajaxを使用して以来、フォームタグは使用しないでください。したがって、ここに行きます：

login html page: 

include jquery 
<script type='text/javascript' src='your-jquery-url'></script> 
<script type='text/javascript'> 

    function tryLogin() { 
     var inputs='userName='+$('logInUsername').val()+ 
        '&userPassw='+$('logInPassword').val(); 
     //notice that I changed your name= to id= in the form 
     //notice the '&' in the '&userPassw= 
     $.post('your-login-validation-page',inputs,function(data) { 
      eval('var json='+data); 
      if (json['success'] == 'true') { 
       $('#loginForm').html('<p>Congratulations! You\'ve been logged in successfully</p>') 
      } else { 
       alert(json['errorMessage']); 
       $('#logInUsername').focus(); 
      } 
     }); 
    } 

</script> 

<div id='loginForm' > 
    <label for="login">User Name</label> 
    <input type="text" id="logInUsername" /> 
    <label for="Password">Password</label> 
    <input type="password" id="logInPassword" /> 
    <button onClick='tryLogin(); ' >LOGIN</button> 
</div> 



login-validation-page 

[in vbscript] 

user = request.Form("userName") 
passw = request.Form("userPassw") 

"if is there this user"  (coded as if there was a database look up...) 
    "if the password = passw" (coded as comparing the values) 
     response.write "{'sucess':'true'}" 
    else 
     response.write "{'success':'false','errorMessage':'wrong password'}" 
    end if 
else 
    response.write "{'success':'false','errorMessage':'user not found'}" 
end if 

---> end of login-validation-page