欢迎来到 黑吧安全网 聚焦网络安全前沿资讯,精华内容,交流技术心得!

通过AJAX实现无刷新登录功能的步骤

来源:本站整理 作者:佚名 时间:2017-03-10 TAG: 我要投稿

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

点击登录按钮时弹出登录窗口,输入正确的用户名密码后点击登录则登录窗口关闭,状态改为当前用户名.
第一步:
首先弹出窗口使用的是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
{
 ///
 /// IsLogin 的摘要说明
 ///
 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
{
 ///
 /// CheckLogin 的摘要说明
 ///
 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
{
 ///
 /// LoginOut 的摘要说明
 ///
 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" %>
 xmlns="http://www.w3.org/1999/xhtml">
 runat="server">
  http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
  href="JQueryUI/css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
  src="JQueryUI/jquery-1.4.2.min.js">
  src="JQueryUI/jquery-ui-1.8.2.custom.min.js">
  type="text/javascript">
 //判断是否登录,登录则显示登录名,隐藏登录按钮,显示注销按钮
 //否则相反
 var isLogin = function () {
  $.post("/AJAX/IsLogin.ashx", function (data) {
  var strs = data.split('|');
  if (strs[0] == "yes") {

[1] [2]  下一页

【声明】:黑吧安全网(http://www.myhack58.com)登载此文出于传递更多信息之目的,并不代表本站赞同其观点和对其真实性负责,仅适于网络安全技术爱好者学习研究使用,学习中请遵循国家相关法律法规。如有问题请联系我们,联系邮箱admin@myhack58.com,我们会在最短的时间内进行处理。
  • 最新更新
    • 相关阅读
      • 本类热门
        • 最近下载