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;

}

}