首页 > ajax登录跳转如何实现的

ajax登录跳转如何实现的

我想在页面用ajax向服务器post数据,如果用户名密码正确,就登录成功,进行跳转。如果不正确,就返回一个json回页面,然后登陆界面给出提示

(就像.com这样的)

我的做法是,服务器验证正确了,也返回json给页面,由js进行跳转,但是不成功,页面没有登录!


用js写cookie,然后跳转。如果是session就不懂了


首先

我观察到的是SF这样的并不算是ajax登录吧,你可以用chrome看看,SF登录的时候并没有使用Ajax

<form action="/api/user/login" method="POST" role="form" class="mt30">

只不过,SF在每个页面都加了一个modal

<div class="modal-dialog modal-lg"> 

要实现SF这种很简单,

提交表单(post) --> 处理(/api/user/login)  --> 跳转 (redirect->back())

思路大概就是这样。

其次

我的做法是,服务器验证正确了,也返回json给页面,由js进行跳转,但是不成功,页面没有登录

你已经解决问题了。


Target code can write as follows:
front end:

$.post('http://www.demo.com/sign_in',{username:username,password:password},function(callback){
    if(callback.status){
        location.href='http://www.demo.com'
    }else{
        alert(callback.msg);
    }
},'json')//maybe you haven't append "json" parameter that lead to the ajax error

back end:

<?php
$callback=array(
    'status'=>false,
    'msg'=>'username can not match the password,please retype your password and username'
);
$check_login;//boolean,check whether username matches the password or not
if($check_login){
$callback=array(
    'status'=>true
}
echo json_encode($callback);

?>


用户名和密码的验证都是后端验证的,这毋庸置疑。

而且,用户登录状态也是要后端设置的,查询数据库后,用户名和密码正确,则在session中存储一个uuid,每个页面需要根据登录状态判断展示相应的内容时,则判断是否有uuid这个session,且uuid不为空。比如头部的登录按钮,在未登录状态是显示登录按钮,在登录后显示用户名和头像,这些都是判断是否有uuid这个值(具体实现里,相对来说更复杂一些)。

我们再来理下这个步骤:
1. 向后端ajax发送用户名和密码
2. 后端接收到用户名和密码后,查询数据库
2.1 若查询失败,则返回一个json数据,如:{"status":"-1", msg:"用户名或密码不正确"}
2.2 若查询成功,则在session中存储一个值,比如uuid,然后向前端返回一个json,比如:{"status":"0", msg:"success"}

3.前端js接收到返回的数据后,判断status的值,若status==0,则使用window.location.href进行跳转;其他的状态码都是登录失败,清空密码框,让用户重新输入。
4.比如登录成功跳转到首页,首页里的php或java,需要判断session里是否有uuid:

html<nav>
    <?php if(isset($_SESSION['uuid']) && !empty($_SESSION['uuid'])):;  ?>
        <!-- 若存在uuid,则不为空,则表示已经登录 -->
        <a href="#">蚊子</a>
    <?php else ?>
        <!-- 没有登录 -->
        <input type="button" value="登录" />
    <?php endif; ?>
</nav>
【热门文章】
【热门文章】