【想到什么写什么】之登录

ajax登录【无刷新登录】

--------------------------------------------------------------

流程：

首先我们程序展示出来的html页面必须包括绿色部分的div（隐藏）

然后点击登录的时候，弹出这个模态框

填写账号、密码之后，点击提交按钮，ajax方式 提交 post 到了后台的登录方法（假如 login 方法）

验证通过之后，返回一个数据包.

在前端页面的ajax 返回数据包 做个判断，通过验证则修改顶部蓝色部分，使之更新为登录后的状态。

比如显示用户名，显示退出按钮

--------------------------------------------------------------

分为两部分：登录模态框、顶部登录信息栏

--------------------------------------------------------------

登录模态框：

html部分

<div id="login_div" style="display:hidden;height:***px;width:***px;">

1个form

3个input（1个submit）

</div>

js部分

点击登录按钮弹出这个模态框，提交到login方法后 将div内容 修改成 显示转动的gif，直至判断login方法返回的data数据包结果出来。

--------------------------------------------------------------

顶部登录信息栏：

html部分

<div>

if（登录了）{

　　<div id="before">登录、注册按钮</div>　　　　　　【登录前显示】css 默认显示

}else（没有登录）{

　　<div id="after">xxxx（用户名）【session】，退出按钮</div>　 【登录后显示】css 默认隐藏

}

　　<div id="ajax_after">xxxx（用户名）【data数据包的内容】，退出按钮</div>　 【登录后显示】css 默认隐藏

</div>

ajax部分

当用户提交完毕，后台返回的data(用户名等信息)数据判断 验证通过 则让id为before的css更改为隐藏 让id为ajax_after的css更改为显示

当用户点击退出登录，刷新页面。再次刷新之后，则只会显示id为after的内容，ajax_after则不会再显示。

--------------------------------------------------------------