집 > 기사 > 백엔드 개발 > 새로 고침 없는 로그인 기능을 구현하는 AJAX 방법

새로 고침 없는 로그인 기능을 구현하는 AJAX 방법

小云云원래의: 2018-01-08 13:26:101306검색

로그인 버튼을 클릭하면 로그인 창이 팝업됩니다. 올바른 사용자 이름과 비밀번호를 입력하고 로그인을 클릭하면 로그인 창이 닫히고 상태가 현재 사용자 이름으로 변경됩니다. 이 기사에서는 AJAX를 구현하는 방법을 주로 소개합니다. 새로고침이 아닌 로그인 기능이 필요한 친구들이 참고하면 도움이 될 것 같습니다.

최근에 새로 고치지 않고 로그인하는 방법을 배웠습니다. 일반적인 효과는 다음과 같습니다(인터페이스가 보기 흉합니다. 무시하세요...).

로그인 버튼을 클릭하면 로그인 창이 나타납니다. up. 올바른 사용자 이름과 비밀번호를 입력하고 로그인하면 로그인 창이 닫히고 상태가 현재 사용자 이름으로 변경됩니다.

1단계:

첫 번째 팝업 창은 jquery의 컨트롤을 사용합니다. -ui. 첫 번째 단계는 사용 방법을 배우는 것입니다.

압축 해제된 파일을 엽니다. development-bundle->demos,找到index.html,选择dialog下的model dialog,右键查看源码,观察如何使用该控件,找到一句关键代码:$("#dialog-modal").dialog({height: 140,modal: true});모델 메시지에서 소스 코드를 열고 닫는 키 코드를 찾습니다. 이 두 줄의 코드를 사용하면 창 표시를 제어하고 닫을 수 있으며, 사용 시에는 해당 폴더의 css 폴더와 js 폴더를 복사해야 합니다. jquery-ui 개발 패키지를 프로젝트에 추가합니다.

2단계:

여기에 AJAX 요청을 처리하는 일반적인 절차를 게시합니다. 핸들러의 코드는 실제로 작성할 때 사용한 후 작성되지만 나열하는 것은 불가능합니다. 자세한 내용은 단계별로 이해를 돕기 위해 일반 처리기 코드가 먼저 게시됩니다.

1.IsLogin.ashx를 사용하여 사용자가 로그인했는지 확인하려면 로그인 시 사용자 이름이 반환됩니다. 일반 처리 프로그램에서 세션을 사용하려면 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. 사용자 로그아웃, 세션을 비어 있음으로 설정

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(&#39;|&#39;);
    if (strs[0] == "yes") {
     $("#pShowLogin").hide();
     $("#pShowLoginOut").show();
     $("#spanName").text(strs[1]);
    } else {
     $("#pShowLogin").show();
     $("#pShowLoginOut").hide();
     $("#spanState").text("未登录");
    }
   });
  }

  $(function () {
   isLogin();
   //点击登录弹出登录窗口
   $("#btnShowLogin").click(function () {
    //模态窗口,设定长宽
    $("#pLogin").dialog({
     height: 160,
     width: 300,
     modal: true
    });
   });

   //点击取消则关闭弹出框
   $("#btnCancel").click(function () {
    $("#pLogin").dialog(&#39;close&#39;);
   });

   //点击登录发送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") {
      $("#pLogin").dialog(&#39;close&#39;);
      isLogin();
     }
     else {
      alert("用户名或密码错误");
     }
    });
   });

   //点击注销发送post请求,在一般处理程序中设置session为null,并调用isLogin函数刷新状态
   $("#btnExit").click(function () {
    $.post("/AJAX/LoginOut.ashx", function () {
     isLogin();
    });

   });

  });
 </script>
</head>
<body>
 <form id="form1" runat="server">
  <p id="pShowLogin" style="display: none">
   <span id="spanState"></span>
   <input type="button" value="登录" id="btnShowLogin" />
  </p>
  <p id="pShowLoginOut" style="display: none">
   <span id="spanName"></span>
   <input type="button" value="注销" id="btnExit" />
  </p>
  <p id="pLogin" 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>
  </p>
 </form>
</body>
</html>

새로 고침 없는 로그인 기능을 구현하는 AJAX 방법

관련 기사