ajax实现用户登录注册和退出

ajax实现用户注册登录和退出

第一步：验证用户名

get
guestbook/index.php
m:index
a:verifyUserName
username:要验证的用户名
返回{
code:返回的信息代码 0=没有错误，1=有错误
message: 返回的信息 具体返回的信息
}

第二步： 用户注册

post
guestbook/index.php
m:index
a:reg
username:要验证的用户名
password:注册密码
返回{
code:返回的信息代码 0=没有错误，1=有错误
message: 返回的信息 具体返回的信息
}

第三步： 用户登录

当登录成功时，调用更新状态函数
post
guestbook/index.php
m:index
a:login
username:要登录的用户名
password:登录密码
返回{
code:返回的信息代码 0=没有错误，1=有错误
message: 返回的信息 具体返回的信息
}

第四步：检验cookie

写一个获取cookie的函数，根据cookie值是否存在来写一个更新用户状态的函数

第五步：用户退出

当用户退出时，调用更新状态函数
post
guestbook/index.php
m:index
a:logout
返回{
code:返回的信息代码 0=没有错误，1=有错误
message: 返回的信息 具体返回的信息
}

（以上是步骤说明和一些后端接口）

完整代码如下

window.onload=function()
{

    var oUsername1=document.getElementById('username1');//用户名框（注册）
    var oVerifyUserNameMsg=document.getElementById('verifyUserNameMsg');//验证验证用户名提示框（注册）
    var oPassword1=document.getElementById('password1');//密码框（注册）
    var obtnReg=document.getElementById('btnReg');//提交按钮（注册）


    var oUsername2=document.getElementById('username2');//用户名框（登录）
    var oPassword2=document.getElementById('password2');//密码框（登录）
    var obtnLogin=document.getElementById('btnLogin');//提交按钮（登录）

    var oReg=document.getElementById('reg');//注册框
    var oLogin=document.getElementById('login');//登录框
    var oUser=document.getElementById('user');//退出框
    var oUserinfo=document.getElementById('userinfo');//用户名（退出框）
    var oLogout=document.getElementById('logout');//退出按钮（退出框）

    function getCookie(key){         //获取cookie值
            var arr=document.cookie.split('; ');
            //console.log(arr);
            for(var i=0;i<arr.length;i++){
                var arr2=arr[i].split('=');
                console.log(arr2);
                if(arr2[0]==key){
                    return arr2[1];
                }
            }
        };
    updataUser();

    function updataUser(oUid){  //更新状态函数
        var oUid=getCookie('uid');
        var oUsername=getCookie('username');

        if(oUid){
            oUser.style.display='block';
            oUserinfo.innerHTML=oUsername;
            oReg.style.display='none';
            oLogin.style.display='none';
        }else{
            oUser.style.display='none';
            oUserinfo.innerHTML="";
            oReg.style.display='block';
            oLogin.style.display='block';
        }

    }
    oUsername1.onblur=function(){    //用户名验证
        ajax('get',"guestbook/index.php",'m=index&a=verifyUserName&username='+this.value,function(data){
            var info=JSON.parse(data);

             oVerifyUserNameMsg.innerHTML=info.message;
             if(info.code){
                oVerifyUserNameMsg.style.color='red';


             }else{
                oVerifyUserNameMsg.style.color='green';
             }
        });
    };
    obtnReg.onclick=function(){     //注册提交按钮
        ajax('post','guestbook/index.php',
            'm=index&a=reg&username='+encodeURI(oUsername1.value)+'&password='+oPassword1.value,
            function(data){
            var info=JSON.parse(data);
            alert(info.message);
            if(!info.code){
                oReg.style.display='none'
            }
        });
    };
    obtnLogin.onclick=function(){        //登录提交按钮
        ajax('post','guestbook/index.php',
            'm=index&a=login&username='+encodeURI(oUsername2.value)+'&password='+oPassword2.value,
            function(data){
                var info=JSON.parse(data);
                alert(info.message);
                if(! info.code){
                    updataUser();
                }

            });

    };

           oLogout.onclick=function(){  //退出提交按钮
            ajax('post','guestbook/index.php',
                'm=index&a=logout',function(data){
                var info=JSON.parse(data);
                alert(info.message);
                if(! info.code){
                    updataUser();
                }

            });
            return false;

           }

}