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

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="/UploadFiles/2021-04-02/jquery-1.4.2.min.js">

以上所述是小编给大家介绍的AJAX如何实现无刷新登录功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

标签:
ajax实现无刷新,ajax无刷新登录

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com

评论“AJAX如何实现无刷新登录功能”

暂无“AJAX如何实现无刷新登录功能”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。