2011-11-21 67 views
7

Tôi có mã này trong mã PHP của mình và hiện tại nó yêu cầu đăng nhập trong cùng trang login.php nhưng bây giờ tôi muốn làm điều đó với Ajax. Về cơ bản tôi có điều này trong login.phpCách thực hiện yêu cầu ajax để đăng nhập

 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>'; 

Tôi muốn vẫn sử dụng này, nhưng có một login_request.php hay cái gì nơi tôi có thể gửi tên người dùng và mật khẩu xác nhận và sau đó thay đổi <div id=login> to say you are logged in!</div> tôi có thể làm điều đó theo cách thông thường, với bài đăng biểu mẫu .. nhưng bây giờ tôi muốn thử nó với Ajax.

Mọi trợ giúp sẽ được đánh giá cao.

Trân

+0

đảm bảo rằng https của mình – Derek

Trả lời

0

Những gì bạn đã cố gắng cho đến nay? Đây là cách tôi sẽ bắt đầu:

Điều này sẽ giúp bạn bắt đầu:

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!"); 
    } 
    }); 
}) 
+0

Đảm bảo rằng bạn đang sử dụng jQuery. – Blender

+0

Câu hỏi được gắn thẻ với jQuery, Blender. – Jordan

+0

cảm ơn bạn, những gì tôi đã thử là cách thông thường .. nhưng tôi làm sạch nó lên để sử dụng ajax, ... xin lỗi tôi mới đến ajax .. chỉ là một câu hỏi .. làm thế nào nó mong đợi các tham số như đầu vào, dấu phẩy được tách ra? một dấu nháy đơn? – user710502

0

tôi đã viết này một thời gian trước đây, nó không hoàn toàn một tên đăng nhập ajax đầy đủ (ví dụ: ở cuối nó vẫn chuyển hướng bạn), nhưng nó có thể đóng vai trò như một cơ sở cho một đăng nhập ajax đầy đủ. Như một cộng thêm, bạn thực sự không cần https (đó là toàn bộ vấn đề của dự án nhỏ này).

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

Các bước cao đi một cái gì đó như thế này:

  • Hỏi máy chủ cho một giá trị hạt (muối) sử dụng một yêu cầu ajax
  • Hash mật khẩu + hạt sử dụng một sha1 tổng số
  • Yêu cầu máy chủ xác minh tên người dùng và mật khẩu được băm + muối
  • Nếu hợp lệ, máy chủ đặt cookie phiên cho biết rằng người dùng được đăng nhập
  • Các máy chủ đáp ứng yêu cầu ajax với một thành công/thất bại nhắn
0

jQuery đã xây dựng trong .post() và .serialize() phương pháp để gói lên một biểu mẫu.

$.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'); 
); 

Bạn cũng sẽ cần phải chỉnh sửa hình thức của bạn để nó có một id, như: <form id="loginForm">...

0

Tôi không biết PHP nhưng sẽ cung cấp cho bạn một ví dụ về cách tôi đã làm nó với VBScript (asp cổ điển), do đó bạn có thể cố gắng thích nghi nó với PHP khi cần thiết.

Tôi, trong các ứng dụng của mình, không sử dụng thẻ biểu mẫu kể từ lần đầu tiên tôi sử dụng ajax. Vì vậy, ở đây chúng tôi đi:

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 
Các vấn đề liên quan