AJAX-Implementierung ohne Aktualisierung der Anmeldung

Dieses Mal bringe ich Ihnen die AJAX-Anmeldung ohne Aktualisierung. Was sind die Vorsichtsmaßnahmen für die Implementierung der AJAX-Anmeldung ohne Aktualisierung?

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 entpackte 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 mit System.Web.SessionState eingeführt und die IRequiresSessionState-Schnittstelle implementiert werden

2. CheckLogin.ashx wird verwendet, um zu erkennen, ob der vom Benutzer eingegebene Benutzername und das Kennwort übereinstimmen. es wird „ja“ zurückgegeben, wenn es falsch ist, wird es der Einfachheit halber keine

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

Verbindung zur Datenbank

3 geben. ashx, wird verwendet, um die Benutzerabmeldung zu steuern und die Sitzung auf leer zu setzen. Das allgemeine Verarbeitungsprogramm 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;
   }
  }
 }
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

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

Empfohlene Lektüre:

<%@ 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('|');
    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('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") {
      $("#pLogin").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">
  <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>

Wie Ajax die Paging-Abfragefunktion der Bootstrap-Modalbox implementiert

Cookies gehen beim Ajax-Cross verloren -Domänenzugriff So lösen Sie

So verwenden Sie Ajax und $.ajax

Das obige ist der detaillierte Inhalt vonAJAX-Implementierung ohne Aktualisierung der Anmeldung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!