Ajax登录注册-----数据请求 交互

环境搭建： 用nodeJs   express 搭建服务器，  用MySQL创建数据库 表格 、SQLyogEnt管理数据库

使用主要技术： bootstrap 、 JS、 jQuery、Ajax、node、 express、 MySQL

登录界面：

项目文件结构：

登录注册模块在 首页的 导航栏 右上角：

 html 部分：

<div class="header-right login">
   <a ><span class="glyphicon glyphicon-user" aria-hidden="true" id="touXiang"></span></a>
   <div id="loginBox" >
      <form id="loginForm">
         <fieldset id="body">
            <fieldset>
               <label >用户名/手机号</label>
               <input type="text" class="username" id="username"><span id="msg"></span>
            </fieldset>
            <fieldset>
               <label for="userpaasword">密码</label>
               <input type="password" name="userpaasword" id="userpaasword">
            </fieldset>
            <div id="shiBai"></div>
            <p type="submit" id="login"  οnclick="checkLogin()">登 录</p>
            <label for="rmbUser"><input type="checkbox" id="rmbUser"><span>记住密码</span></label>
         </fieldset>
         <p>新用户? <a class="sign" href="account.html">注册</a> <span>快速登录：
            <a href="#"><i class="fa fa-qq" aria-hidden="true"></i>
            <i class="fa fa-weixin" aria-hidden="true">
            </i><i class="fa fa-weibo" aria-hidden="true"></i>
            <i class="fa fa-github" aria-hidden="true"></i></a></span></p>
      </form>
   </div>
</div>

css 部分：

/*--Login --*/
#msg{
   color: white;
}
.nonee{
   display: none;
}
#loginContainer {    position:relative;}#loginContainer a span{  display:block;}/* Login Button */#loginButton {     display:inline-block;      position:relative;    z-index:30;    cursor:pointer;}/* Login Box */#loginBox {    position: absolute;    top: 98%;    right:14.5%;    /*display:none;    /!* ����ٻָ�*!/*/    z-index: 99;}#loginForm:after {    content: '';    position: absolute;    right: 9%;    top: -9px;    border-left: 10px solid rgba(0, 0, 0, 0);    border-right: 10px solid rgba(0, 0, 0, 0);    border-bottom: 10px solid #FFFFFF;
/* Login Form */#loginForm {   width: 300px;   background: #fff;   border: 1px solid #d6d6d6;}#loginForm fieldset {    margin:0 0 15px 0;    display:block;    border:0;    padding:0;}fieldset#body {    border-radius:3px;    -webkit-border-radius:3px;    -moz-border-radius:3px;    -o-border-radius:3px;    padding:15px 15px;    margin:0;}#loginForm #checkbox {    width:auto;    margin:3px 6px 0 0;    float:left;    padding:0;    border:0;    *margin:-3px 9px 0 0; /* IE7 Fix */}#body label {    color:#87807c;    margin:10px 0 0 0;    display:block;    text-align: left;    font-size:12px;}#loginForm #body fieldset label{    margin:0 0 6px 0;}#body label {    color: #87807c;    font-size: .2em;    /*outline:1px solid darkorange;*/}#username{    position: relative;}#msg{    position: absolute;    width: 140px;    height: 20px;    top:45px; left:150px;    /*outline:1px solid gold;*/}#login{ position:relative;}#shiBai{    width: 140px;  height: 30px; color:#F07818;    /*outline: 1px solid #4a1aff;*/    position: absolute;    left:60px; bottom:160px;}.copyrights{   text-indent:-9999px;   height:0;   line-height:0;   font-size:0;   overflow:hidden;}/* Default Input */#loginForm input {    width:100%;    border:1px solid #DADADA;   color: #222;   background:#FFF;    padding:6px;   font-size: 0.4em;    -webkit-apperance:none;    /*outline:1px solid red;*/}#loginForm input:focus{    box-shadow: inset 0 1px 1px rgba(105, 105, 105, 0.07), 0 0 3px #e87619;}/* Sign In Button */#loginForm #login {    background: #F07818;    color: #fff;    font-size: 1em;    padding: 5px 20px;    border: 1px solid #F07818;    transition: all .5s;    -webkit-transition: all .5s;    -moz-transition: all .5s;    -o-transition: all .5s;    font-family: 'Roboto-Regular';    /*outline:1px solid #41b1ff;*/}#loginForm #login:hover {   background: #fff;   color: #F07818;}/* Forgot your password */#loginForm p {    font-size: 0.9em;    margin-bottom: 1.2em;   color: #999;    /*outline:1px solid #7816ff;*/}.header-right #loginForm a.sign {    display: inline-block !important;    color: #F07818;    margin-right: 10px;    border-right: 1px solid;    padding-right: 10px;    /*outline:1px solid #d92dff;*/}.header-right #loginForm a.sign:hover {    color: #5D4B33;}#loginForm span a {    color: #999;    display: inherit;}#loginForm span a:hover{   text-decoration:underline;   color:#F07818;}input:focus {    outline:none;}.header-right.login:hover #loginBox {   display:block;}

 

      当点击  最终的登录按钮，触发 前台向  服务器发起ajax请求  将用户输入的用户名 和密码 传递到服务器，服务器链接后台数据库，比对数据，如果查询到有这一组数据，说明是正确的，返回 data结果给前台 的ajax 回调函数，然后操作dom  渲染页面（跳转到主页面）

     如果前台ajax 回掉函数 里面的 收到的后台返回来的data数据是 自己在路由层设定好的错误信息提示，那么就 操作dom: 弹出一个遮罩层  上面内容提示用户登录失败

另一个ajax请求 是检查登录状态、判断用户是否是第二次登录，二次登录的时候 让浏览器暂时保存用户的名字，提示 欢迎 某某某：

<