Question

我的PHP代码中有这个，它目前在同一个login.php页面中执行登录请求，但现在我想用Ajax来做。基本上我在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>';

我想仍然使用这个，但有一个login_request.php或者我可以发送用户名和密码验证的东西，然后改变<div id=login> to say you are logged in!</div>我可以用传统的方式，用表格发布..但现在我想用Ajax尝试一下。

非常感谢任何帮助。

此致

Answer 1

我刚才写过这个，它不是一个完整的ajax登录（即最后它仍然会重定向你），但它可以作为完整的ajax登录的基础。作为一个加号你实际上不需要https（这是这个小项目的重点）。

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

高级步骤是这样的：

使用ajax请求向服务器询问种子值（盐）
使用sha1 sum
要求服务器验证用户名和salted +哈希密码
如果有效，服务器会设置一个会话cookie，表明用户已登录
服务器使用成功/失败消息响应ajax请求

Answer 2

到目前为止你尝试了什么？我就是这样开始的：

这应该让你开始：

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 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，例如：<form id="loginForm">...

Answer 4

我不知道PHP，但会给你一个如何用vbscript（经典的asp）完成它的例子，所以你可以尝试根据需要调整它到PHP。

我在我的应用程序中，因为我第一次使用ajax，所以不要使用form标签。所以，我们走了：

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

如何进行ajax登录请求

4 个答案: