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

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

第一步:

首先弹出窗口使用的是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. 《spark机器学习 第二版》 蔡立宇 分享 pdf下载

    链接:https://pan.baidu.com/s/15Y14eAnfj8zf5mXdixbVeQ 提取码:rkdt

  2. Controller层@PathVariable使用

    @PathVariable 映射 URL 绑定的占位符 带占位符的 URL 是 Spring3.0 新增的功能,该功能在SpringMVC 向 REST 目标挺进发展过程中具有里程碑的意义通过 @Pa ...

  3. Spring入门学习笔记（3）——事件处理类

    目录 Spring中的事件处理 Spring内建事件 监听Context事件 Example 自定义Spring事件 Spring中的事件处理 ApplicationContext 是Spring的核 ...

  4. 第七章 用户输入和while循环

    7.1函数input()的工作原理 函数默认输入为字符串string,如果需使用数字,需用int进行类型转换 7.2 while循环 while是根据条件的真假判断是否进入执行 使用标志: 使用bre ...

  5. ssh软件及命令的使用

    常用软件安装及使用目录 第1章 ssh常用用法小结 1.1 连接到远程主机: 命令格式 : ssh name@remoteserver 或者 ssh remoteserver -l name 说明:以 ...

  6. 微信公众号开发笔记1(nodejs开发)

    本篇记录了微信公众号开发的一些笔记 一.微信服务器与我们服务器的交流 微信开发者拥有自己的服务器,在我们服务器上可以与微信服务器进行交流.既然可以交流,那就必定需要前提条件(微信认证),也就是说,只有 ...

  7. 基于Promise规范的fetch API的使用

    基于Promise规范的fetch API的使用 fetch的使用 作用:fetch 这个API,是专门用来发起Ajax请求的: fetch 是由原生 JS 提供的 API ,专门用来取代 XHR 这 ...

  8. Final发布中间产物

    目录 ❶版本控制 ❷软件功能说明书 ❸WBS ❹PSP 一.版本控制 ①Git地址:https://git.coding.net/tianjiping/Android-tianjiping.git ② ...

  9. Bing词典vs有道词典比对测试报告——体验篇之软件适应性

    联网情况: 在联网情况下,针对每一次查询,有道词典的反应速度明显比必应词典快得多.据我推测有以下两个原因: 有道词典有本地词库而必应词典更多依赖联网. 有道词典的服务器在国内而必应的在国外. 断网情况 ...

  10. Daily Scrum 11.7

    明后两天周六日,按照TFS的日常安排应该是休息,所以让他们自由完成已经分配的任务. 姓名 今日任务 黄新越 提取爬取网页的关键字并输出到接口 刘垚鹏 程序总架构的修改与多线程的学习 王骜 多线程学习 ...