弹出层异步登录的事

现在大多网站都集成了弹出层登录, 如 重庆人才网, 智联招聘, 搜才网, tmall, 速捷网等, 且弹出层登录一般还都是采用异步的方式, 很利于用户体验. 如图:

下面学习吧来分析下弹出层登录的那些事;

首先我们来建立一个弹出层的方法:

var SJ = {};
SJ.login = function () {
	//这里写弹出层的HTML代码样式, 并负责把他弹出到屏幕中间;
	//弹出后最后让光标聚焦到里面文本框以便利于用户体验;
	//最好给文本框表单绑定form submit提交事件, 因为大多数人习惯用回车提交表单;
        //提交时走ajax异步, 并阻止默认form提交方式, 可用js或者jQuery实现;
}

注:上面提到给form绑定submit事件, 而不是采用给 "登录" 按钮绑定点击事件. 请看-> 表单提交的那些事

具体构架弹出层请自己写, 也可用现成的弹出层组件, 只需自己构架出表单的HTMl,css就行, 如: layer, artdialog等;

构架好弹出层代码, 用的时候 SJ.login(); 就能登录, 但发现这满足不了需求, 因为一般都是有回调的, 如: 用户在评论的时候输入内容后点 "评论" 按钮, 如果没登录提示登录并弹出登录层, 但用户登录后, 还用需要点 "评论" 按钮吗? 照一般流程是得点的, 但为了用户体验, 我们要做到不让他点, 登录后就直接评论. 这个需求, 回调可以做到. 看代码:

var SJ = {};
SJ.login = function (fn) {
	//这里的fn为回调
	
	// 弹出层登录的js...
	
	//异步登录 ajax
	
	$.ajax({
		//省略所有, 只保留关键
		success: function (e) {
			if(e) {//如果后端有返回值
				if (e === 1) {//模拟成功, 这里的判断可根据自己需求而写
					fn && fn(); //如果有fn回调则执行他
				}
			}
		}	
	});
}

这样做在需要做用户登录的时候直接调用:

SJ.login(function () {
     //这里是需要在登录后执行的代码, 如评论点击事件等;
});

为了用户体验我们再来扩展这个弹出层, 加上弹出的时候 "弹出框" 上标题文字的提示, 如: "请登录后再评论", "请登录后再下单" 等;

var SJ = {};
SJ.login = function (fn,str) {
	if ("string" === typeof(fn)) {
		fn = [str||false,str = fn][0];//为了解决第一个是str,第二个是fn的问题
	}
	str = str || "请登录";//为了解决只有fn没有str的时候
	//str就是弹出层的标题了. 在下面弹的时候直接用就行
	
	// 弹出层登录的js...
	
	//异步登录 ajax
	
	//登录ajax成功后回调代码, 省略;
}

这样做就能给弹出层加你想要的提示了, 如:

SJ.login("请登录后再添加收藏", function () {});
SJ.login(function(){}, "您还没有登录, 请先登录");
...

但会有个问题出现, 就是js怎么判断用户是否登录呢? 速捷网采用的是 每个页加载完后给后端发个请求, 判断是否已登录, 如果已经登录, 就不弹出层了, 当然你也可以在程序里每个页写到前台一个变量. 下面看修改后的代码:

var SJ = {};
SJ.userName = null;
SJ.userStatus = false;//记录用户登录状态, 当然你可以扩展自己需要的, 如:用户id,用户级别等

SJ.check = function () {
	//判断是否登录
	$.ajax({
		success: function (e) {
			if(e) {//简单演示, 写入用户名和登录标志
				SJ.userName = e;
				SJ.userStatus = true;
			}
		}	
	});
}


SJ.login = function (fn,str) {
	if ("string" === typeof(fn)) {
		fn = [str||false,str = fn][0];//为了解决第一个是str,第二个是fn的问题
	}
	str = str || "请登录";//为了解决只有fn没有str的时候

	
	if (SJ.userStatus) {
		fn && fn(SJ.userName);// 把用户名当参数传过去, 当然如果你可扩展自己所需要的
		return SJ;//这样支持连写, 你懂的	
	}
	
	//弹出登录表单并异步
	
}

SJ.check();
//当然你这里还可以扩展如: 注册, 退出, 第三方登录等, 第三方登录也可做回调哦, 经学习吧测试, 如:qq,sina等第三方的jsAPI都很利于用户体验的, 你为何不试试呢?.. 哈哈

　　

以上基本可以满足一般的弹出层登录需求了...