AJAX如何实现无刷新登录功能

作者: 内涵精神病筱筱
来源: 51数据库
2021-09-21

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

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

第一步:

首先弹出窗口使用的是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.51sjk.com/Upload/Articles/1/0/282/282104_20210709011106508.jpg">
<head runat="server">
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title></title>
 <link  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[0] == "yes") {
     $("#divshowlogin").hide();
     $("#divshowloginout").show();
     $("#spanname").text(strs[1]);
    } else {
     $("#divshowlogin").show();
     $("#divshowloginout").hide();
     $("#spanstate").text("未登录");
    }
   });
  }

  $(function () {
   islogin();
   //点击登录弹出登录窗口
   $("#btnshowlogin").click(function () {
    //模态窗口,设定长宽
    $("#divlogin").dialog({
     height: 160,
     width: 300,
     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如何实现无刷新登录功能，希望对大家有所帮助