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

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

第一步:

首先弹出窗口使用的是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. 在WebGL场景中管理多个卡牌对象的实验

    这篇文章讨论如何在基于Babylon.js的WebGL场景中,实现多个简单卡牌类对象的显示.选择.分组.排序,同时建立一套实用的3D场景代码框架.由于作者美工能力有限,所以示例场景视觉效果可能欠佳,本 ...

  2. Unity生成简易二维码

    最近项目需求,需要在Unity中动态生成二维码.所以就研究了一下,下面把动态生成二维码的方法向大家分享一下. 第一种方法 需要一个 ZXing.dll文件. 下载地址我会在文章结尾给出. 直接将下载好 ...

  3. keyup在移动端失效解决方法

    keyup在移动端失效解决方法: $("#OBJ").on("input propertychange", function(){ }); 采用 input 与 ...

  4. 4. 为HelloWorld添加日志

    回顾 通过上篇内容,我们已经使用flask编写了我们的第一个接口或者说是html页面.我们可以看到,使用flask来编写接口/页面是十分简单的.那么接下来,我们丰富一下上面的例子. 需求 现在的需求来 ...

  5. 搭建好看的静态博客（使用Hexo进行搭建）

    经常看到大牛的博客非常的高大帅气,虽然我很渣,但是逼格不能输,所以有了以下的搭建记录. 我的成果ninwoo,喜欢的可以参考下面的记录一起来动手搞起来. 安装Git Bash 访问git下载最新版本的 ...

  6. 下一个时代的发展架构竟然是它！FaaaaaaaaS到底是个啥？

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯云serverless团队发表于云+社区专栏 导读:2018年7月6 - 7日,一年一度的技术圈盛会ArchSummit全球架构师 ...

  7. 工具 | Sublime

    Sublime 前言 妈耶..\(Sublime\)的界面真的是太好看啦哭哭.. 我永远喜欢Sublime! 强推Sublime... 正文 自从暑假用上的Ubontu 一开始用的是\(gedit\) ...

  8. 2-Third Scrum Meeting-20151203

    任务安排 闫昊: 今日完成:请假.(编译+计组,压力有点大) 明日任务:设计本地数据库. 唐彬: 今日完成:请假.(编译+计组,压力有点大) 明日任务:阅读ios客户端代码. 史烨轩: 今日完成:请假 ...

  9. 第二次作业<2>

    自学计划 应为对网络的教程并不了解,所以-- 我扒了一遍同学的博客,找到了两个课程. 慕课网 和 这个. 选择这两个教程主要是深入浅出,比较合理. 开始先两个课程相互应证,多了解以后可能会选择一个.虽 ...

  10. slf4j+log4j的初次使用

    关于这两者的组合应用带来的好处,google都有 就不说了. 首先说下配置, 工作笔记:在myeclipse 中创建一个java project 创建一个 TestSlf4J 类 package co ...