AJAX-Methode zur Implementierung einer aktualisierungsfreien Anmeldefunktion

Wenn Sie auf die Schaltfläche „Anmelden“ klicken, wird ein Anmeldefenster angezeigt. Nachdem Sie den richtigen Benutzernamen und das Kennwort eingegeben und auf „Anmelden“ geklickt haben, wird das Anmeldefenster geschlossen und der Status wird in den aktuellen Benutzernamen geändert implementiert die Nicht-Aktualisierungs-Anmeldefunktion. Freunde in Not können sich darauf beziehen.

Ich habe kürzlich gelernt, wie man eine Anmeldung ohne Aktualisierung erreicht. Der allgemeine Effekt ist wie folgt (die Benutzeroberfläche ist hässlich, bitte ignorieren Sie sie ...):

Klicken Sie, um sich anzumelden. Wenn Sie auf die Schaltfläche klicken, wird ein Anmeldefenster angezeigt. Nachdem Sie den richtigen Benutzernamen und das richtige Passwort eingegeben haben, klicken Sie auf „Anmelden“. Das Anmeldefenster wird geschlossen und der Status wird auf den aktuellen Benutzernamen geändert 🎜>

Schritt 1:

Erstes Das Popup-Fenster verwendet Steuerelemente in jquery-ui. Der erste Schritt besteht darin, zu lernen, wie man es verwendet.

Öffnen Sie das dekomprimierte Fenster

Suchen Sie unter jquery-UI nach index.html und wählen Sie unter „dialog“ den Modelldialog aus. Klicken Sie mit der rechten Maustaste, um den Quellcode anzuzeigen, beobachten Sie, wie das Steuerelement verwendet wird, und suchen Sie nach einem Schlüsselcode:

Dies dient der Anzeige. Öffnen Sie den Quellcode in der Modellnachricht und suchen Sie den Schlüsselcode zum Schließen: $(this).dialog('close') ; Mit diesen beiden Codezeilen können Sie die Anzeige und das Schließen des Fensters steuern und fortfahren Zum nächsten Schritt. Wenn Sie es verwenden, müssen Sie den CSS-Ordner und den JS-Ordner des jquery-ui-Entwicklungspakets in das Projekt kopieren. development-bundle->demos$("#dialog-modal").dialog({height: 140,modal: true});

Zweiter Schritt:

Hier werde ich zunächst den Code für den allgemeinen Handler veröffentlichen, der AJAX-Anfragen verarbeitet, nachdem ich ihn beim eigentlichen Schreiben verwendet habe. Zum besseren Verständnis ist es hier nicht möglich, im ersten Beitrag detailliert darauf einzugehen Der allgemeine Handler-Code:

1.IsLogin.ashx, der verwendet wird, um zu bestimmen, ob der Benutzer angemeldet ist, und den Benutzernamen zurückgibt, wenn er angemeldet ist. Beachten Sie hier, dass Sie im allgemeinen Handler die Sitzung verwenden muss die Verwendung von System.Web.SessionState einführen und die IRequiresSessionState-Schnittstelle implementieren

2. CheckLogin.ashx wird verwendet, um zu erkennen, ob der Benutzername und das Kennwort vom Benutzer eingegeben wurden Übereinstimmung. Wenn korrekt, geben Sie „Ja“ zurück. Wenn der Fehler „Nein“ zurückgibt, besteht der Einfachheit halber keine Verbindung zur Datenbank Benutzerabmeldung steuern und Sitzung festlegen ist leer

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;
   }
  }
 }
}

Der Code der Hauptschnittstelle ist unten aufgeführt:

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;
   }
  }
 }
}

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;
   }
  }
 }
}

Verwandte Empfehlungen:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="AJAX无刷新登录.Login" %>

Ajax-PHP-Benutzer-Anmeldebeispiel ohne Aktualisierung_PHP-Tutorial

<!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>

JQuery-Studiennotizen verwenden JQuery, um eine aktualisierungsfreie Anmeldung zu erreichen_jquery

Detaillierte Erläuterung der Benutzer-Anmeldemethode ohne Aktualisierung basierend auf JQuery ajax_jquery

Das obige ist der detaillierte Inhalt vonAJAX-Methode zur Implementierung einer aktualisierungsfreien Anmeldefunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!