用户登录(一)

/**
本篇文章主要分享内容:
1. MVC中用户登录
2. js脚本与服务器端交互完成登录
3. js AJAX封装
*/
// 对于管理系统而言登录必不可少，且登录不仅仅只是简单的用户信息验证。本文重点仅为服务器端简单登录验证及完成前后端交互。

// 首先为服务器端代码，定义方法名为Login,并限制请求方式为post

///
/// 登录
/// 创建人:李子玉
/// 日期:2017-07-22 22:19:42
///
[HttpPost]
public ActionResult Login()
{
// 得到post请求参数
string account = Request.Form[“account”];
string password = Request.Form[“password”];

// 验证用户登录信息,返回提示信息(登录的验证方法非本次内容)
string msg = this.UserLogin(account,password);

// 将返回的信息拼装为对象，以json字符串方式返回客户端，进行交互
// 登录信息无误，返回空值,否则返回对应错误信息
// code 为返回码，1表示成功，2表示验证信息有误(以后将用到多个返回码，用于在ajax交互中自动处理某些情况，如登录过期、请求失败等)
int code = 2;
if (string.IsNullOrEmpty(msg))
{
    msg="登录成功！";
    code = 1;
}

// 使用 JsonResult将对象转为json字符串
return Json(new{Code=code,Message = msg},JsonRequestBehavior.AllowGet); 

}

// js脚本(ajax原生写法)
$.ajax({
type:’POST’, // 请求方式 get/post
url:’/Controller/Login’, // 请求地址
data:{{ “account”: account, “password”: password}, // 请求参数 (账号、密码)
dataType:’json’, // 返回数据类型
success:function(result){
// 请求成功 执行方法
result = eval(“(“+result+”)”); // 将json字符串转为对象

    if(result.Code = 1){
        // 登录信息验证成功
    }

    if(result.Code = 2){
        // 登录信息验证失败
        alert(result.Message);
    }
}

});

// 对AJAX进行封装
// type请求方式（POST或GET），url请求地址，params请求参数（不包含?），callback成功返回后的调用方法，lock是否锁屏， async是否异步请求，是否关闭锁屏
function ajaxRequest(type,url,params,callback,lock,async,closeLock){
var isAsync = false;
if(!isNull(async)){
isAsync = true;
}

var isLock = true;
if(callback){
    if(!isNull(lock)){
        isLock = lock;
    }
}else{
    isLock = false;
}

$.ajax({
    type: type,
    async: isAsync,
    url: url,
    data: params,
    dataType: "json",
    beforeSend: function () {
        if (isLock) {
            // 显示请求等待效果
            showWWaitting();
        }
        return true;
    },
    success: function (result) {
        if (callback) {
            if (typeof (result) == "string") {
                result = eval("(" + result + ")");
            }

            if (typeof (result) == "undefined" || result == null) {
                if (isLock) {
                    // 关闭请求等待效果
                    closeWaitting();
                }
                alert("返回的数据错误！");
            }else{
                if(result.Code < 0){
                    // 关闭等待效果
                    closeWaitting();
                    // 返回数据有误出错，根据code返回码返回对应错误信息,如用户未登录
                    if(result.Code == -3){
                        alert("用户未登录");
                        // 跳转导登陆页
                    }else{
                        alert(result.Message);
                    }
                }else{
                    // 数据返回成功,将数据对象传递给callback事件
                    callback(result);
                    if(closeLock){
                        // 关闭等待效果
                        closeWaitting();
                    }
                }
            }
        }
    },
    error: function (data, status, e) {
        // 请求出错处理
        // 关闭等待效果
        closeWaitting();
        alert("数据请求出错！");
    }
});

}
// 判断是否为null或空字符串
function isNull(text){
var t = typeof(text);
if(t==”undefined” || t == null) return true;
if(t==”string” && $.trim(text) ==”” ) return true;

return false;

}
// 调用AJAX请求，完成登录交互
ajaxRequest(“/Controller/login”, { “account”: account, “password”: password}, function (res) {
if (res.Code > 1) {

        $("#errMsg").html("");
        // 显示错误信息
        $("#errMsg").append(res.Message);
        $("#btnLogin").val("登录");
        return false;
    } else {
        // 数据验证成功，跳转首页
    }
}, false

);

// 注:本文只简单实现了利用ajax请求完成服务器端登录信息验证，关于登录验证成功，生成上下文信息、添加cookie及session，最终完成登录将在下一篇中分享

原文链接：http://blog.5lzy.com/Blog/Index/ViewEntity?code=WZ000017