JQuery的ajax登录案例

1.简单版
AjaxLogin.html代码：

<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                var name = $("#name").val();
                var pwd = $("#pwd").val();
                $.ajax({
                    type: "post",
                    url: "AjaxLogin.ashx",
                    data: { name: name, pwd: pwd },
                    success: function (data) {
                        var strs = $.parseJSON(data);
                        if (strs.Status == "ok") {
                            alert(strs.Msg);
                        }
                        else if (strs.Status == "error") {
                            alert(strs.Msg);
                        }
                        else {
                            alert("服务器返回信息出错");
                        }
                    },
                    error: function () {
                        alert("登录请求失败");
                    }
                });
            });
        });
    </script>
</head>
<body>
    <input type="text" id="name" value="" />
    <input type="text" id="pwd" value="" />
    <input type="button" id="btn" value="确定" />
</body>
</html>

AjaxLogin.ashx代码：

public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/html";
    string name = context.Request["name"];
    string pwd = context.Request["pwd"];
    if (name == "admin" && pwd == "123")
    {
        string json = new JavaScriptSerializer().Serialize(new { Status = "ok", Msg = "登录成功" });
        context.Response.Write(json);
    }
    else
    {
        string json = new JavaScriptSerializer().Serialize(new { Status = "error", Msg = "登录失败" });
        context.Response.Write(json);
    }
}

 

2.完整版

Login.html代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>登录</title>
    <script src="jquery-1.5.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#imgValidCode").click(function () {
                $("#imgValidCode").attr("src", "LoginValidCode.ashx?" + new Date());
            });
            
            $("#btnLogin").click(function () {
                var username = $("#username").val();
                var password = $("#password").val();
                var validCode = $("#validCode").val();
                $.ajax({
                    type: 'post', url: 'Login1.ashx', data: { username: username, password: password ,validCode:validCode},
                    success: function (data) {
                        if (data.Status == "ok") {
                            alert("登录成功");
                        }
                        else if (data.Status == "error") {
                            alert("出错啦！" + data.Msg);
                        }
                        else {
                            alert("服务器返回信息未知");
                        }
                    },
                    error: function () {
                        alert("登录请求失败");
                    }
                });
            });
        });
        
    </script>
</head>
<body>
    <table>
        <tr><td>用户名：</td><td><input type="text" id="username" /></td></tr>
        <tr><td>密码：</td><td><input type="password" id="password" /></td></tr>
        <tr><td><img src="LoginValidCode.ashx" id="imgValidCode" /></td><td><input type="text" id="validCode" /></td></tr>
        <tr><td><input type="button" id="btnLogin" value="登录" /></td><td></td></tr>
    </table>
</body>

Login.ashx代码：

public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "application/json";
    string username = context.Request["username"];
    string password = context.Request["password"];
    string validCode = context.Request["validCode"];

    //sesssion中的验证
    string serverValidCode = (string)context.Session[LoginValidCode.LOGINVALIDCODE];
    if (validCode != serverValidCode)
    {
        string json = new JavaScriptSerializer().Serialize(new { Status="error",Msg="验证码错误"});
        context.Response.Write(json);
        return;
    }
    DataTable dtUsers =  SqlHelper.ExecuteQuery("select * from T_Users where UserName=@UserName",
        new SqlParameter("@UserName",username));
    if (dtUsers.Rows.Count <= 0)
    {
        string json = new JavaScriptSerializer().Serialize(new { Status = "error", Msg = "用户名不存在" });
        context.Response.Write(json);
        return;
    }
    if (dtUsers.Rows.Count > 1)
    {
        string json = new JavaScriptSerializer().Serialize(new { Status = "error", Msg = "系统出错，请联系管理员" });
        context.Response.Write(json);
        return;
    }
    DataRow rowUser = dtUsers.Rows[0];
    string dbPassword = (string)rowUser["Password"];
    if (dbPassword == password)
    {
        string json = new JavaScriptSerializer().Serialize(new { Status = "ok", Msg = "登录成功" });
        context.Response.Write(json);
    }
    else
    {
        string json = new JavaScriptSerializer().Serialize(new { Status = "error", Msg = "密码错误" });
        context.Response.Write(json);
    }
}

 

posted @ 2015-07-31 15:11  黄者之风  阅读(955)  评论(0)    收藏  举报