一款经典的ajax登录页面 后台asp.net

下面实现一个经典的登录页面，有保存密码功能，页面上所有的控件都是html控件，没有服务器控件

1，新建一名为login.htm的静态网页文件，作为登录页面，如图

body标签代码

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->

代码如下:

<body onkeydown ="enterLogin()"> <!--添加按下键盘事件-->

<div style="text-align: center">
<table border="1" cellpadding="1">
<tr>
<td align="center" style="width: 100px; height: 20px; background-color: #99cccc"
valign="middle">
用户名：</td>
<td align="center" style="width: 74px; height: 20px; background-color: #99cccc" valign="middle">
<input id="txtusername" style="width: 111px; height: 19px" type="text" onblur ="checkuser()" /></td>
<td align="center" style="width: 199px; height: 20px; background-color: #99cccc"
valign="middle"><img src="" id ="imgCheck" style = "visibility :hidden; "/ ><span id ="unMessage">
</span></td>
</tr>
<tr>
<td align="center" style="width: 100px; height: 29px; background-color: #99cccc"
valign="middle">
密码：</td>
<td align="center" style="width: 74px; height: 29px; background-color: #99cccc" valign="middle">
<input id="txtpwd" style="width: 107px; height: 17px" type="password" /></td>
<td align="center" style="width: 199px; height: 29px; background-color: #99cccc"
valign="middle"><span id ="pwdMessage"></span>
</td>
</tr>
<tr>
<td align="center" colspan="3" style="background-color: #99cccc" valign="middle">
<input id="cbRememberPwd" type="checkbox" />记住密码一个月</td>
</tr>
<tr>
<td align="center" colspan="3" style="background-color: #99cccc" valign="middle">
<input id="btnOK" type="button" value="登录" onclick ="login()" />
<input id="btnReset" type="button" value="重置" onclick ="reset()" /></td>
</tr>
</table>
</div>

</body>

2，在login.htm中引入外部js代码

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><script type ="text/javascript" src ="aj.js" ></script>
<script type ="text/javascript" src ="loginCookies.js" ></script>

其中aj.js为ajax封装的类，loginCookie.js为对Cookie操作的代码

aj.js代码如下

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->//JScript文件

//ajax请求功能函数
//作者：吴宝佑
//get调用方式：(1)实例化 var aj=new ajax(); (2)调用get函数 aj.get(url,callback) (3)写回调函数 function callback(xhr){xhr.responsetext}
//post调用方式：(1)实例化 var aj=new ajax(); (2)调用post函数 aj.post(url,content,callback) (3)写回调函数 function callback(xhr){xhr.responsetext}

//构造ajax对象

function ajax() 
{
    function getXHR()//获取xmlhttprequest
    {
        var request=false;
        try 
        {
            request = new XMLHttpRequest();
        } 
        catch (trymicrosoft) 
        {
              try 
              {
                request = new ActiveXObject("Msxml2.XMLHTTP");
              } 
              catch (othermicrosoft) 
              {
                try 
                {
                      request = new ActiveXObject("Microsoft.XMLHTTP");
                } 
                catch (failed) 
                {
                      request = false;
                }
              }
        }
        return request;
    }

this.get = function (openUrl,successFun)//ajax对象的get方法,通过get方式发送请求,openUrl为请求的页面,successFun为成功回调执行的函数
    {
        var request = getXHR();
        request.open("get",openUrl,true);
//        request.onreadystatechange = function ()
//        {
//            if (request.readystate==4)
//            {
//                if (request.status==200)
//                {
//                    successFun(request);
//                }
//            }
//        };
        request.onreadystatechange = update;
        function update()
        {
            if (request.readystate==4)
            {
                if (request.status==200)
                {
                    successFun(request);
                }
            }
        }
        request.send(null);
    }

this.post = function (openUrl,sendContent,successFun)//ajax对象的post方法,通过post方式发送请求,openUrl为请求的页面,successFun为成功回调执行的函数
    {
        var request = getXHR();
        request.open("post",openUrl,true);
        request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//告诉服务器发送的是文本
        request.onreadystatechange = update;
        function update()
        {
            if (request.readystate==4)
            {
                if (request.status==200)
                {
                    successFun(request);
                }
            }
        }
        request.send(sendContent);
    }
}

loginCookie.js代码如下

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->//JScript文件

//SetCookie 保存一个Cookie。参数中除了name和value以外，其他可以省略。
//GetCookie 通过一个Cookie的名字取出它的值。
//DelCookie 删除一个Cookie，也就是让一个Cookie立刻过期。参数中除了name，其他可以省略。

//测试
//SetCookie("username", "123");expires代表"月"
//alert(GetCookie("username"));
//DelCookie("username");
//alert(GetCookie("username"));

function SetCookie(name, value, expires, path, domain, secure) {
  var today = new Date();
  today.setTime(today.getTime());
  if(expires) { expires *= 2592000; }
  var expires_date = new Date(today.getTime() + (expires));
  document.cookie = name + "=" + escape(value)
    + (expires ? ";expires=" + expires_date.toGMTString() : "")
    + (path ? ";path=" + path : "")
    + (domain ? ";domain=" + domain : "")
    + (secure ? ";secure" : "");
}

function GetCookie(name) {
  var cookies = document.cookie.split( ';' );
  var cookie = '';

for(var i=0; i<cookies.length; i++) {
    cookie = cookies[i].split('=');
    if(cookie[0].replace(/^\s+|\s+$/g, '') == name) {
      return (cookie.length <= 1) ? "" : unescape(cookie[1].replace(/^\s+|\s+$/g, ''));
    }
  }
  return null;
}

function Delcookie(name, path, domain) {
  document.cookie = name + "="
    + (path ? ";path=" + path : "")
    + (domain ? ";domain=" + domain : "")
    + ";expires=Thu, 01-Jan-1970 00:00:01 GMT";
}

3，写login.htm页面中的js代码，放在head标签之间

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->    <script type ="text/javascript" >
        window.onload = function (){
            document.getElementById ('txtusername').focus();//用户名框获得焦点

            if (GetCookie('user_name') != null && GetCookie('user_pwd') != null)//设置记住密码的登录页面
            {
                document.getElementById ("txtusername").value = GetCookie('user_name');
                document.getElementById ("txtpwd").value = GetCookie('user_pwd');
            }
        }

String.prototype.Trim = function() //自定义的去除字符串两边空格的方法
        { 
            return this.replace(/(^\s*)|(\s*$)/g, ""); 
        }

function checkuser()//检验用户名是否正确
        {
            var img = document.getElementById ("imgCheck")
            img.src="iamges/blue-loading.gif";//设置图片及其可见性
            img.style.visibility = "visible";

var aj = new ajax();//以下为ajax请求
            var username = document.getElementById ("txtusername").value.Trim();
            var url = "login.aspx?uname="+escape(username);
            aj.get(url,callback);
            function callback(obj)
            {
                var response = obj.responsetext;
                var res = response.split('\n');
                if (res[0] == "ok")
                {
                    img.src="iamges/icon-info.gif";
                    document.getElementById ("unMessage").innerHTML = "<font color='#00ff00'>用户名正确</font>";
                }
                else
                {
                    img.src="iamges/icon-warning.gif";
                    document.getElementById ("unMessage").innerHTML = "<font color='#ff0000'>用户名错误</font>";
                }
            }
        }

function login()//登录
        {
            if (document.getElementById ("unMessage").innerText == "用户名错误")
            {
                alert("你的用户名错误");
            }
            else if (document.getElementById ("txtpwd").value == "")
            {
                alert("请输入密码");
            }
            else
            {
                var aj = new ajax();
                var username = document.getElementById ("txtusername").value.Trim();
                var userpwd = document.getElementById ("txtpwd").value;
                var url = "login.aspx?name="+escape(username)+"&pwd="+escape(userpwd);
                aj.get(url,callback);
                function callback(obj)
                {
                    var response = obj.responsetext;
                    var res = response.split('\n');
                    if (res[0] == "ok")
                    {
                        if (document.getElementById ("cbRememberPwd").checked)
                        {
                            SetCookie('user_name',username,1);//保存密码一个月
                            SetCookie('user_pwd',userpwd,1);
                        }
                        else
                        {
                            SetCookie('user_name',username);
                            SetCookie('user_pwd',userpwd);
                        }
                        window.open ("loginIndex.htm","_self");
                    }
                    else
            &p;            {
                        alert("密码错误");
                    }
                }
            }
        }

function reset()//重置
        {
            window.onload();//执行窗体登录事件
            document.getElementById ("txtusername").value="";
            document.getElementById ("txtpwd").value="";
        }

function enterLogin()
        {
            if (event.keyCode==13) //如果按下的是Enter键的话，就执行登录语句
            {
                login();
            }
        }
    </script>

4，新建一名为login.aspx的页面，该页面作为ajax请求的页面，login.aspx.cs代码如下

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->    protected void Page_Load(object sender, EventArgs e)
    {
        OleDbConnection Conn = DBcon.get_con();

if (Request["uname"] != null)
        {
            string username = Request["uname"].ToString();
            string strSql = "select * from [user] where u_name='" + username + "'";
            Conn.Open();
            OleDbCommand Comd = new OleDbCommand(strSql, Conn);
            OleDbDataReader dr = Comd.ExecuteReader();
            if (dr.Read())
            {
                Response.Write("ok\n");
            }
            else
            {
                Response.Write("fail\n");
            }
            //if (Comd.ExecuteNonQuery() > 0)
            //{
            //    Response.Write("存在这个用户\n");
            //}
            //else
            //{
            //    Response.Write("没有此用户名\n");
            //}
            Conn.Close();
        }

if (Request["name"] != null && Request["pwd"] != null)
        {
            string name = Request["name"].ToString();
            string pwd = Request["pwd"].ToString();
            string strSql = "select * from [user] where u_name='" + name + "'" + " and u_pwd='" + pwd + "'";
            Conn.Open();
            OleDbCommand Comd = new OleDbCommand(strSql, Conn);
            OleDbDataReader dr = Comd.ExecuteReader();
            if (dr.Read())
            {
                Response.Write("ok\n");
            }
            else
            {
                Response.Write("fail\n");
            }
        }
    }

5，新建一名为loginIndex.htm的静态页面，作为用户登录之后的首页

其body标签代码如下

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><body>
    <span id ="username"> </span>
</body>

6，在loginIndex.htm页面引入loginCookie.js文件

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><script type ="text/javascript" src ="loginCookies.js" ></script>

7，写loginIdex.htm页面的js代码，放在head标签之间

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->    <script type ="text/javascript" >
        window.onload = function ()
        {
            if(GetCookie('user_name')==null || GetCookie('user_pwd')==null)//如果没有登录,而是直接在网页中输入网址的
            {
                alert('你还没有登录！\n返回到登陆页面。');
                window.navigate("login.htm");
            }
            else
            {
                var uname = GetCookie('user_name');
                document.getElementById ('username').innerHTML ="欢迎你： " + uname + "     <a href='#' onclick = 'off()'>注销</a>";//提供"注销"按钮
            }
        }

function off()//注销事件
        {
            if (window.confirm("你真要注销吗？"))
            {
                Delcookie("user_name");
                Delcookie("user_pwd");
                window.navigate("login.htm");
            }
        }
    </script>

8，完成，客户端代码较多，但是交互性很好

演示如下：

当输入完用户名，鼠标光标离开用户名框之后，系统会快速检验用户名是否合法

进入首页后，出现的窗口，带有当前登录的用户和注销按钮

当用户点击注销按钮时，会友情提示你是否真的注销

当你不是输入用户和密码登陆，也是直接在浏览器地址栏中输入首页网址的时候，系统会提示你没有登录，并直接返回到登陆页面。

当用户输入了有效的用户名和密码，并要求系统记住密码，用户下次进入到登录页面时，系统会把上次记住的用户名和密码显示在输入框中。。

并且这个时候直接在浏览器的地址栏中输入首页地址，也是能正常访问的。



nbsp;       {
                        alert("密码错误");
                    }
                }
            }
        }

function reset()//重置
        {
            window.onload();//执行窗体登录事件
            document.getElementById ("txtusername").value="";
            document.getElementById ("txtpwd").value="";
        }

function enterLogin()
        {
            if (event.keyCode==13) //如果按下的是Enter键的话，就执行登录语句
            {
                login();
            }
        }
    </script>

4，新建一名为login.aspx的页面，该页面作为ajax请求的页面，login.aspx.cs代码如下

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->    protected void Page_Load(object sender, EventArgs e)
    {
        OleDbConnection Conn = DBcon.get_con();

if (Request["uname"] != null)
        {
            string username = Request["uname"].ToString();
            string strSql = "select * from [user] where u_name='" + username + "'";
            Conn.Open();
            OleDbCommand Comd = new OleDbCommand(strSql, Conn);
            OleDbDataReader dr = Comd.ExecuteReader();
            if (dr.Read())
            {
                Response.Write("ok\n");
            }
            else
            {
                Response.Write("fail\n");
            }
            //if (Comd.ExecuteNonQuery() > 0)
            //{
            //    Response.Write("存在这个用户\n");
            //}
            //else
            //{
            //    Response.Write("没有此用户名\n");
            //}
            Conn.Close();
        }

if (Request["name"] != null && Request["pwd"] != null)
        {
            string name = Request["name"].ToString();
            string pwd = Request["pwd"].ToString();
            string strSql = "select * from [user] where u_name='" + name + "'" + " and u_pwd='" + pwd + "'";
            Conn.Open();
            OleDbCommand Comd = new OleDbCommand(strSql, Conn);
            OleDbDataReader dr = Comd.ExecuteReader();
            if (dr.Read())
            {
                Response.Write("ok\n");
            }
            else
            {
                Response.Write("fail\n");
            }
        }
    }

5，新建一名为loginIndex.htm的静态页面，作为用户登录之后的首页

其body标签代码如下

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><body>
    <span id ="username"> </span>
</body>

6，在loginIndex.htm页面引入loginCookie.js文件

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><script type ="text/javascript" src ="loginCookies.js" ></script>

7，写loginIdex.htm页面的js代码，放在head标签之间

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->    <script type ="text/javascript" >
        window.onload = function ()
        {
            if(GetCookie('user_name')==null || GetCookie('user_pwd')==null)//如果没有登录,而是直接在网页中输入网址的
            {
                alert('你还没有登录！\n返回到登陆页面。');
                window.navigate("login.htm");
            }
            else
            {
                var uname = GetCookie('user_name');
                document.getElementById ('username').innerHTML ="欢迎你： " + uname + "     <a href='#' onclick = 'off()'>注销</a>";//提供"注销"按钮
            }
        }

function off()//注销事件
        {
            if (window.confirm("你真要注销吗？"))
            {
                Delcookie("user_name");
                Delcookie("user_pwd");
                window.navigate("login.htm");
            }
        }
    </script>

8，完成，客户端代码较多，但是交互性很好

演示如下：

当输入完用户名，鼠标光标离开用户名框之后，系统会快速检验用户名是否合法

进入首页后，出现的窗口，带有当前登录的用户和注销按钮

当用户点击注销按钮时，会友情提示你是否真的注销

当你不是输入用户和密码登陆，也是直接在浏览器地址栏中输入首页网址的时候，系统会提示你没有登录，并直接返回到登陆页面。

当用户输入了有效的用户名和密码，并要求系统记住密码，用户下次进入到登录页面时，系统会把上次记住的用户名和密码显示在输入框中。。

并且这个时候直接在浏览器的地址栏中输入首页地址，也是能正常访问的。

赞 (0)

相关推荐

  • asp.net jQuery Ajax用户登录功能的实现

    主页面调用代码片段: 复制代码 代码如下: <asp:HyperLink ID="lnkLogin" runat="server" NavigateUrl="#" >登录</asp:HyperLink> <script language="javascript" type="text/javascript"> $('#<%=this.lnkLogin.ClientI

  • PHP+jQuery+Ajax实现用户登录与退出

    用户登录与退出功能应用在很多地方,而在有些项目中,我们需要使用Ajax方式进行登录,登录成功后只刷新页面局部,从而提升了用户体验度.本文将使用PHP和jQuery来实现登录和退出功能. 准备数据库 本例我们使用Mysql数据库,创建一张user表,表结构如下: CREATE TABLE `user` ( `id` int(11) NOT NULL auto_increment, `username` varchar(30) NOT NULL COMMENT '用户名', `password` v

  • Ajax异步方式实现登录与验证

    本文实例讲述了Ajax异步方式实现登录与验证的详细代码,分享给大家供大家参考.具体如下: 登录代码 这个是使用Bootstrap3的组件功能实现的 <div class="login_con_R"> <h4>登录</h4> <FORM id="loginFormId" class="form-horizontal" action="login" method="post&qu

  • jquery ajax 登录验证实现代码

    使用 jquery 框架:下载 jquery.js 新建一个 web 工程 ajax : 在 webRoot 下新建一个 jslib 文件夹:专门存放 js 文件: 在 webRoot 下新建一个 html/jsp 页面: login.html 复制代码 代码如下: <script type = "text/javascript" src = "jslib/jquery.js"></ script> <script type = &qu

  • jQuery.ajax 用户登录验证代码

    复制代码 代码如下: $.ajax({ type: "post", url: "Handler1.ashx", data: { username: "admin", password: "123" }, success: successHandle }); function successHandle(rep) { $("#msg").html(rep); }

  • jQuery+AJAX实现遮罩层登录验证界面（附源码）

    jQuery+AJAX实现遮罩层登录验证界面（附源码）

    JQuery遮罩层登录界面效果的实现,AJAX实现登录验证,文章尾有完整示例源码下载,欢迎大家学习研究. 操作系统:Windwos7 Ultimate 开发工具:Visual Studio 2010 数据库:Sql Server 2005 测试浏览器:IE8.FF3.6.8.Google Chrome (IE8中弹出登录层后会出现竖拉条,其他两种没有出现,那个竖拉条可以在JS中通过修改数值让其不出现,但是下面会出现白边,越来越觉得IE有点那个了......) 1.预览 1)登录前 2)点击登录显

  • Ajax实现漂亮、安全的登录界面

    Ajax实现漂亮、安全的登录界面

    登录界面是信息系统提供的必备的功能,是提供给用户提供维护信息的接口.接下来,我来带领大家打造一个漂亮.安全的登录界面,使用的技术是ASP.NET+jQuery 先来看看预览效果 Ajax登录重点在Ajax,输入用户名和密码后,使用Ajax方式将信息提交到服务器端,服务器端判断时候存在该用户,存在则登录成功并转向管理界面(有时需要写cookie或是利用Session,此处不作讨论),不存在则提示登录失败. 基本流程图如下 上面是主要思路,为了打造安全的登录,在使用ajax将密码传到服务器端前,我们

  • 基于jquery ajax 用户无刷新登录方法详解

    Ajax框架就是提供模块化实现Ajax功能的集合,Ajax框架可以是各种语言实现的(比如SAJAX有各种语言的实现),Ajax只是jquery中的一部分, 实例1 复制代码 代码如下: $.ajax({ type:'post',//可选get url:'action.php',//这里是接收数据的PHP程序 data:'data='dsa',//传给PHP的数据,多个参数用&连接 dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script html

  • 简单示例AJAX结合PHP代码实现登录效果代码

    HTML部分: <html> <head> <scrīpt language="javascrīpt"> function postRequest(strURL){ var xmlHttp; if(window.XMLHttpRequest){ // For Mozilla, Safari, ... var xmlHttp = new XMLHttpRequest(); } else if(window.ActiveXObject){ // For 

  • jQuery+Ajax用户登录功能的实现

    jQuery+Ajax用户登录功能的实现

    ok,先来贴几张张效果图. 其中大致流程是用户点击页面右上角的登录链接接着弹出div模拟窗口,该窗口通过iframe调用Login.aspx页面,用户输入用户名 密码和验证码后,Login.aspx页面的jQuery代码post到Login.ashx页面处理,Login.ashx页面可以算是简易的aspx页面吧. 当然你用LoginProcess.aspx 也是可以的.Login.ashx页面处理完把结果返回给Login.aspx页面处理,result变量用与接收结果. 如果返回1表示登录成功,

随机推荐