AJAX实现无刷新登录

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

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

第一步:

首先弹出窗口使用的是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实现无刷新登录的更多相关文章

使用ajax实现无刷新改变页面内容
如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...
jsp+ajax实现无刷新
jsp+ajax实现无刷新,鼠标离开文本框即验证用户名 jsp+ajax实现无刷新,鼠标离开文本框即验证用户名(本功能多用于注册) input.jsp(表单提交页面): %@ page content ...
window.history.pushState与ajax实现无刷新更新页面url
ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...
Ajax 实现无刷新分页
Ajax 实现无刷新分页
Ajax 实现无刷新页面
注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这 ...
PHP+Ajax+plupload无刷新上传头像代码
很简单的一款PHP+Ajax+plupload无刷新上传头像代码,兼容性很好,可以直接拿来用.你可以自定义各种类型的文件.本实例中只能上传"jpg", "png" ...
jQuery+php+ajax实现无刷新上传文件功能
jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码 <script type='text/javascript' src='j ...
在Thinkphp中使用AJAX实现无刷新分页
在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...
jQuery AJAX 网页无刷新上传示例
新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

随机推荐

c语言数字图像处理（五）：空间滤波
空间滤波原理使用大小为m*n的滤波器对大小为M*N的图像进行线性空间滤波,将滤波器模板乘以图像中对应灰度值,相加得模板中心灰度值 a = (m-1)/2, b = (n-1)/2 若f(x+s, y ...
Git知识点整合
Git安装 Windows上安装Git 64 位安装包下载地址 : https://github.com/git-for-windows/git/releases/download/v2.16.2.w ...
VMware vSphere 6.0 安装及管理手册
目录 1. VMWARE_VSPHERE安装 1.1. 底层ESXI 安装步骤 1.2. VCENTER安装步骤 1) 准备vCenter安装环境 2) vCenter安装步骤 2. VMWARE_V ...
xlutils模块使用
python常用模块目录 1.xlutils 实现拷贝原文件原表格: import xlrd from xlutils.copy import copy workbook = xlrd.open_w ...
第十二周PSP
第31次Scrum会议（11/19）【欢迎来怼】
一.小组信息队名:欢迎来怼小组成员队长:田继平成员:李圆圆,葛美义,王伟东,姜珊,邵朔,阚博文小组照片二.开会信息时间:2017/11/19 17:05~17:34,总计29min. 地 ...
Scrum Meeting 10.31
成员今日任务明日任务今日工作时长徐越整理开发文档,学习ip相关知识,学习servlet相关知识代码迁移,学习数据库相关知识 5h 赵庶宏学习学长的servlet代码进行数据库的连接 4 ...
Alpha阶段产品功能说明
先展示一下我们的功能流程图吧~ 一.学生用户 1. 学生登陆注册 BuaaClubs是北航所有在校生都可以注册登录的网站. 登陆界面是这样哒~ 2. 浏览报名活动同学们可以在这个网站上查看所有社团发 ...
web02-welcomeyou
新建web项目web02-welcomeyou, 修改index.jsp为 <body> This is my JSP page. <br> <form action=& ...
Java锁的种类以及辨析
锁作为并发共享数据,保证一致性的工具,在JAVA平台有多种实现(如 synchronized 和 ReentrantLock等等 ) .这些已经写好提供的锁为我们开发提供了便利,但是锁的具体性质以及类 ...

AJAX实现无刷新登录

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

随机推荐

热门专题