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

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

第一步:

首先弹出窗口使用的是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. 'javac' 不是内部或外部命令,也不是可运行的程序 或批处理文件.

    如果你只需要使用javac命令不需要如此复杂的!! 你先把你自己新建的JAVA_HOME.CLASSPATH这两个变量和PATH变量中的JAVA_HOME%\bin;%JAVA_HOME%\jre\b ...

  2. 与（&）、或（|）等运算符理解及其特殊用途

    1.按位与运算符(&) 在与运算中两个开关是串联的,如果我们要开灯,需要两个开关都打开灯才会打开.理解为A与B都打开,则开灯,所以是1&1=1任意一个开关没打开,都不开灯,所以其他运算 ...

  3. Jmeter关联处理

    采桑子·重阳 人生易老天难老, 岁岁重阳. 今又重阳, 战地黄花分外香. 一年一度秋风劲, 不似春光. 胜似春光, 廖廓江天万里霜. 当请求之间有依赖关系,比如一个请求的入参是另一个请求返回的数据,这 ...

  4. Java 浅拷贝 深拷贝

    两者区别主要在于引用数据类型的属性,对于基本数据类型采用的是值传递,所以两者一样: 对于浅拷贝,引用数据类型只会进行引用传递,即复制一份引用值(内存地址)给新对象,一个对象的变化会影响到另一个的引用属 ...

  5. spring-framework-reference(5.1.1.RELEASE)中文版——Core部分

    前言 最近在学习Spring框架,在学习的同时,借助有道翻译,整理翻译了部分文档,由于尚在学习当中,所以该篇文章将会定时更新,目标在一个月左右时间翻译完全部版本. 虽然大部分内容为翻译,但是其中可能会 ...

  6. 1分钟入门接口自动化框架Karate

    介绍 在这篇文章中,我们将介绍一下开源的Web-API自动化测试框架——Karate Karate是基于另一个BDD测试框架Cucumber来建立的,并且共用了一些相同的思想.其中之一就是使用Gher ...

  7. [Windows][C#][.NET][WPF]基于ArcFace2.0+红外双目摄像头的活体检测

    废话不多说 直接上图这个是demo中用到的双目摄像头,一个是红外的,一个是正常的rgb摄像头两个usb接口,在电脑上呈现两路摄像头通道程序检测RGB输出图像,当检测到有人脸时,用RGB人脸的位置到红外 ...

  8. Python入门学习系列——Python文件和异常

    从文件中读取数据 首先准备一个文本文件,文件中存储着普通文本数据.读取文件需要调用open()和read()函数. 读取整个文件 代码示例: with open('pi_digits.txt') as ...

  9. Spring MVC controller的方法返回值

    ModeAndView 可以在构造时确定需要跳转的页面也可以通过setViewName方法来确定需要跳转的页面 String 指定返回页面的视图名称,页面跳转,如果加了@ResponseBody注解, ...

  10. UVA - 10635 Prince and Princess LCS转LIS

    题目链接: http://bak.vjudge.net/problem/UVA-10635 Prince and Princess Time Limit: 3000MS 题意 给你两个数组,求他们的最 ...