iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >如何使用asp.net实现ajax登录页面
  • 617
分享到

如何使用asp.net实现ajax登录页面

2024-04-02 19:04:59 617人浏览 泡泡鱼
摘要

这篇文章将为大家详细讲解有关如何使用asp.net实现ajax登录页面,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。下面实现一个经典的登录页面,有保存密码功能,页面上所有

这篇文章将为大家详细讲解有关如何使用asp.net实现ajax登录页面,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

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

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

如何使用asp.net实现ajax登录页面

body标签代码

复制代码 代码如下:


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

<div >
<table border="1" cellpadding="1">
<tr>
<td align="center"  
valign="middle">
用户名:</td>
<td align="center"  valign="middle">
<input id="txtusername"  type="text" onblur ="checkuser()" /></td>
<td align="center"  
valign="middle"><img src="" id ="imGCheck" style = "visibility :hidden; "/ ><span id ="unMessage">
</span></td>
</tr>
<tr>
<td align="center"  
valign="middle">
密码:</td>
<td align="center"  valign="middle">
<input id="txtpwd"  type="passWord" /></td>
<td align="center"  
valign="middle"><span id ="pwdMessage"></span>
</td>
</tr>
<tr>
<td align="center" colspan="3"  valign="middle">
<input id="cbRememberPwd" type="checkbox" />记住密码一个月</td>
</tr>
<tr>
<td align="center" colspan="3"  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代码

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

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

aj.js代码如下

//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代码如下

//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标签之间

    <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代码如下

    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标签代码如下

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

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

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

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

    <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 + "&nbsp; &nbsp; &nbsp;<a href='#' onclick = 'off()'>注销</a>";//提供"注销"按钮
            }
        }

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

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

演示如下:

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

如何使用asp.net实现ajax登录页面

如何使用asp.net实现ajax登录页面

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

如何使用asp.net实现ajax登录页面

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

如何使用asp.net实现ajax登录页面

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

如何使用asp.net实现ajax登录页面

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

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

如何使用asp.net实现ajax登录页面

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代码如下

    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标签代码如下

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

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

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

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

    <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 + "&nbsp; &nbsp; &nbsp;<a href='#' onclick = 'off()'>注销</a>";//提供"注销"按钮
            }
        }

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

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

演示如下:

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

如何使用asp.net实现ajax登录页面

如何使用asp.net实现ajax登录页面

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

如何使用asp.net实现ajax登录页面

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

如何使用asp.net实现ajax登录页面

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

如何使用asp.net实现ajax登录页面

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

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

如何使用asp.net实现ajax登录页面

关于“如何使用asp.net实现ajax登录页面”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: 如何使用asp.net实现ajax登录页面

本文链接: https://www.lsjlt.com/news/83070.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何使用asp.net实现ajax登录页面
    这篇文章将为大家详细讲解有关如何使用asp.net实现ajax登录页面,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。下面实现一个经典的登录页面,有保存密码功能,页面上所有...
    99+
    2024-04-02
  • ajax如何实现简单的登录页面
    小编给大家分享一下ajax如何实现简单的登录页面,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一.什么是ajaxAjax是一种无需重新加载整个网页,能够更新部分网...
    99+
    2023-06-08
  • SpringBoot结合Ajax实现登录页面实例
    目录一、 Ajax1.1 Ajax介绍 1.2 异步的作用 二、SpringBoot应用Ajax2.1 开发配置 2.2 创建user表 2....
    99+
    2024-04-02
  • ajax如何实现session超时跳转到登录页面
    这篇文章给大家分享的是有关ajax如何实现session超时跳转到登录页面的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。问题:使用window.location.href来跳转页面的时候,后端只需实现一个过滤器就...
    99+
    2023-06-08
  • ajax如何编写简单的登录页面
    这篇文章主要介绍了ajax如何编写简单的登录页面,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。AJAX的全称是Asynchronous JavaScript and XML(...
    99+
    2023-06-08
  • 基于layui如何实现登录页面
    本篇内容主要讲解“基于layui如何实现登录页面”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“基于layui如何实现登录页面”吧!首先给看下效果图吧!html、js<!DOCTYPE&nb...
    99+
    2023-06-21
  • 使用ajax怎么实现微信网页授权登录
    今天就跟大家聊聊有关使用ajax怎么实现微信网页授权登录,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。功能实现引导用户唤起微信授权确认页面这里需要我们做两件事,第一去配置jsapi域...
    99+
    2023-06-08
  • Android如何实现简单QQ登录页面
    本篇内容介绍了“Android如何实现简单QQ登录页面”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!设计一个简单QQ登录页面,无任何功能。然...
    99+
    2023-06-30
  • Ajax如何实现漂亮安全的登录界面
    这篇文章主要介绍Ajax如何实现漂亮安全的登录界面,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!登录界面是信息系统提供的必备的功能,是提供给用户提供维护信息的接口。接下来,我来带领大家打造一个漂亮、安全的登录界面,使...
    99+
    2023-06-08
  • html如何实现酷炫动态登录页面
    本篇内容介绍了“html如何实现酷炫动态登录页面”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! 代码如下...
    99+
    2024-04-02
  • php登录失败页面提示如何实现
    本篇内容介绍了“php登录失败页面提示如何实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!php实现登录失败页面提示的方法:1、创建log...
    99+
    2023-07-04
  • 如何用php+AJax+json实现登录验证
    本文小编为大家详细介绍“如何用php+AJax+json实现登录验证”,内容详细,步骤清晰,细节处理妥当,希望这篇“如何用php+AJax+json实现登录验证”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。随着W...
    99+
    2023-07-05
  • jQ中如何使用ajax实现用户无刷新登录
    这篇文章给大家分享的是有关jQ中如何使用ajax实现用户无刷新登录的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。ajax俗称无刷新登录或局部刷新登录,这样可以提高用户体验了,文章...
    99+
    2024-04-02
  • 微信小程序如何实现登录页面
    这篇文章主要讲解了“微信小程序如何实现登录页面”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序如何实现登录页面”吧!1. 在首页中加入一个弹窗作为登录窗口,效果如下图:(1)inde...
    99+
    2023-06-30
  • HTML+jQuery如何实现简单的登录页面
    这篇文章主要介绍“HTML+jQuery如何实现简单的登录页面”,在日常操作中,相信很多人在HTML+jQuery如何实现简单的登录页面问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML+jQuery如何...
    99+
    2023-06-25
  • JavaScript如何实现简易登录注册页面
    小编给大家分享一下JavaScript如何实现简易登录注册页面,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下<!DOCTYPE htm...
    99+
    2023-06-26
  • asp.net中怎么利用ajax实现分页
    asp.net中怎么利用ajax实现分页,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。具体如下:这里涉及两个.aspx文件,一...
    99+
    2024-04-02
  • Ajax如何实现无刷新登录
    这篇文章主要为大家展示了“Ajax如何实现无刷新登录”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Ajax如何实现无刷新登录”这篇文章吧。先建一个Login.h...
    99+
    2024-04-02
  • ASP.NET中Ajax如何使用
    在ASP.NET中,可以使用Ajax进行异步通信和更新页面,以下是使用Ajax的步骤:1. 引入jQuery库:在页面中引入jQue...
    99+
    2023-08-14
    ASP.NET Ajax
  • javaweb实现注册登录页面
    本文实例为大家分享了javaweb实现注册登录页面的具体代码,供大家参考,具体内容如下 <%@ page language="java" contentType="text/h...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作