最近学习了如何实现无刷新登录,大体的效果如下(界面比较丑,请自行忽略....):

点击登录按钮时弹出登录窗口,输入正确的用户名密码后点击登录则登录窗口关闭,状态改为当前用户名.

第一步:

首先弹出窗口使用的是jquery-ui中的控件,第一步要学会如何使用.

打开解压后的jquery-UI下的development-bundle->demos,找到index.html,选择dialog下的model dialog,右键查看源码,观察如何使用该控件,找到一句关键代码:$("#dialog-modal").dialog({height: 140,modal: true});这是用于显示的,打开model message中的源码,找到关闭的关键代码:$(this).dialog('close');有了这两句代码,可以控制窗口的显示与关闭,可以进行下一步了.使用时需复制jquery-ui开发包的css文件夹,js文件夹到项目中.

第二步:

在这里先贴出处理AJAX请求的一般处理程序的代码,虽然正真写的时候都是用到再写,但这里不可能一步一步详细列出,为了便于理解,先将一般处理程序代码贴出来:

1.IsLogin.ashx,用于判断用户是否登录,登录则返回用户名.这里注意,在一般处理程序中要使用session,必须引入using System.Web.SessionState且要实现IRequiresSessionState接口

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.SessionState;

namespace AJAX无刷新登录.AJAX

{

    /// <summary>

    /// IsLogin 的摘要说明

    /// </summary>

    public class IsLogin : IHttpHandler,IRequiresSessionState

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            if (context.Session["userName"] != null)

            {

                string userName = context.Session["userName"].ToString();

                context.Response.Write("yes|"+userName);

            }

            else

            {

                context.Response.Write("no");

            }

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

2.CheckLogin.ashx,用于检测用户输入用户名密码是否匹配,正确则返回yes,错误返回no,这里为了简便没有连接数据库.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.SessionState;

namespace AJAX无刷新登录.AJAX

{

    /// <summary>

    /// CheckLogin 的摘要说明

    /// </summary>

    public class CheckLogin : IHttpHandler,IRequiresSessionState

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            string userName = context.Request["userName"];

            string password=context.Request["password"];

            if (userName=="admin"&&password=="admin")

            {

                context.Session["userName"] = "admin";

                context.Response.Write("ok");

            }

            else

            {

                context.Response.Write("no");

            }

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

3.LoginOut.ashx,用于控制用户登出,设置session为空.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.SessionState;

namespace AJAX无刷新登录.AJAX

{

    /// <summary>

    /// LoginOut 的摘要说明

    /// </summary>

    public class LoginOut : IHttpHandler,IRequiresSessionState

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            context.Session["userName"] = null;

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

一般处理程序就结束了,下面贴出主界面的代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="AJAX无刷新登录.Login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <link href="JQueryUI/css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />

    <script src="JQueryUI/jquery-1.4.2.min.js"></script>

    <script src="JQueryUI/jquery-ui-1.8.2.custom.min.js"></script>

    <script type="text/javascript">

        //判断是否登录,登录则显示登录名,隐藏登录按钮,显示注销按钮

        //否则相反

        var isLogin = function () {

            $.post("/AJAX/IsLogin.ashx", function (data) {

                var strs = data.split('|');

                if (strs[] == "yes") {

                    $("#divShowLogin").hide();

                    $("#divShowLoginOut").show();

                    $("#spanName").text(strs[]);

                } else {

                    $("#divShowLogin").show();

                    $("#divShowLoginOut").hide();

                    $("#spanState").text("未登录");

                }

            });

        }

        $(function () {

            isLogin();

            //点击登录弹出登录窗口

            $("#btnShowLogin").click(function () {

                //模态窗口,设定长宽

                $("#divLogin").dialog({

                    height: ,

                    width: ,

                    modal: true

                });

            });

            //点击取消则关闭弹出框

            $("#btnCancel").click(function () {

                $("#divLogin").dialog('close');

            });

            //点击登录发送post请求在一般处理程序CheckLogin.ashx中验证登录,

            //根据回调函数结果判断是否登录成功

            $("#btnLogin").click(function () {

                var userName = $("#txtUserName").val();

                var password = $("#txtPwd").val();

                $.post("/AJAX/CheckLogin.ashx", { "userName": userName, "password": password }, function (data) {

                    if (data == "ok") {

                        $("#divLogin").dialog('close');

                        isLogin();

                    }

                    else {

                        alert("用户名或密码错误");

                    }

                });

            });

            //点击注销发送post请求,在一般处理程序中设置session为null,并调用isLogin函数刷新状态

            $("#btnExit").click(function () {

                $.post("/AJAX/LoginOut.ashx", function () {

                    isLogin();

                });

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

        <div id="divShowLogin" style="display: none">

            <span id="spanState"></span>

            <input type="button" value="登录" id="btnShowLogin" />

        </div>

        <div id="divShowLoginOut" style="display: none">

            <span id="spanName"></span>

            <input type="button" value="注销" id="btnExit" />

        </div>

        <div id="divLogin" title="登录窗口" style="display: none">

            <table style="text-align: left" id="tbLoin">

                <tr>

                    <td>用户名：</td>

                    <td>

                        <input type="text" id="txtUserName" /></td>

                </tr>

                <tr>

                    <td>密码：</td>

                    <td>

                        <input type="password" id="txtPwd" /></td>

                </tr>

                <tr>

                    <td>

                        <input type="button" value="登录" id="btnLogin" /></td>

                    <td style="text-align: left">

                        <input type="button" value="取消" id="btnCancel" /></td>

                </tr>

            </table>

        </div>

    </form>

</body>

</html>

这样就完成了,第一次写博客,感觉萌萌哒.

AJAX实现无刷新登录的更多相关文章

  1. 使用ajax实现无刷新改变页面内容

    如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...

  2. jsp+ajax实现无刷新

    jsp+ajax实现无刷新,鼠标离开文本框即验证用户名 jsp+ajax实现无刷新,鼠标离开文本框即验证用户名(本功能多用于注册) input.jsp(表单提交页面): %@ page content ...

  3. window.history.pushState与ajax实现无刷新更新页面url

    ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...

  4. Ajax 实现无刷新分页

    Ajax 实现无刷新分页

  5. Ajax 实现无刷新页面

    注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这 ...

  6. PHP+Ajax+plupload无刷新上传头像代码

    很简单的一款PHP+Ajax+plupload无刷新上传头像代码,兼容性很好,可以直接拿来用.你可以自定义各种类型的文件.本实例中只能上传"jpg", "png" ...

  7. jQuery+php+ajax实现无刷新上传文件功能

    jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码 <script type='text/javascript' src='j ...

  8. 在Thinkphp中使用AJAX实现无刷新分页

    在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...

  9. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

随机推荐

  1. JavaWeb项目学习教程(2) 系统数据库设计

    最开始本来想写一个管理系统,因为考虑到期末来临,我女朋友就可以看着教程然后学一些东西,然后可以自己慢慢手敲代码.但无奈自己也太懒,两个月过后,我才开始继续写这个博客,而现在我都已经开学了.不过博客还是 ...

  2. C语言操作符学习总结

    c语言中关于操作符部分的学习,可以主要分为两个部分:操作符和表达式. 这里首先是列举各种操作符,在C语言中,一般主要的操作符有这么几种:算数操作符,移位操作符,位操作符,赋值操作符,单目运算符,关系操 ...

  3. Unity编辑器扩展 Chapter7--使用ScriptableObject持久化存储数据

    Unity编辑器扩展 Chapter7--使用ScriptableObject持久化存储数据 unity unity Editor ScirptableObject  Unity编辑器扩展 Chapt ...

  4. java多线程之述解

    说起线程 就不得不提进程 他们之间的关系很紧密 进程:内存中运行的应用程序 每个进程都有自己的一块内存空间 而线程是进程中的一个执行单元 一个进程中可以有多个线程 多线程的好处就是可以并发操作程序 将 ...

  5. 曾经的华为C面试题，一点就通

     学习编程可以锻炼你的思维,帮助你更好地思考,创建一种我认为在各领域都非常有用的思维方式.   比尔盖茨      曾经的华为C面试题,一点就通 [问题区] 有两个变量x和y, x=10; y = 2 ...

  6. mysql的安装教程-【linux】

    先卸载系统自带的mysql,停止mysql:service mysql stop 1.查找以前是否装有mysql命令:rpm -qa|grep -i mysql可以看到mysql的几个包:qt-mys ...

  7. spring boot 配置全局日期类型转换器

    1. 首先自定义一个类型转换器 import org.springframework.core.convert.converter.Converter; import org.springframew ...

  8. numastat命令详解

    基础命令学习目录 作者:[吴业亮]博客:http://blog.csdn.net/wylfengyujiancheng一.系统架构的演进从SMP到NUMA1.SMP(Symmetric Multi-P ...

  9. vue ，v-for循环对象，不是深度克隆？ 数据改变了但是页面元素没有更新。问题解决

    <div id="app"> <ul > <li v-for="(val,key,idx) in list" > {{key ...

  10. Shell脚本 数据清洗

    需要做的任务是将上图类似的格式的文件进行处理,将年月日小时分别提取出来放到每行的行尾(上图已清洗好) 自己的思路是先用cut命令将每行的年月日小时提取出来,分别给一个变量,然后再循环利用sed命令将年 ...