AJAX非リフレッシュログイン機能の実装方法-PHPチュートリアル-php.cn

AJAX非リフレッシュログイン機能の実装方法

迷茫

リリース： 2023-03-05 10:20:02

オリジナル

1601 人が閲覧しました

ログインボタンをクリックすると、ログインウィンドウが表示されます。正しいユーザー名とパスワードを入力してログインをクリックすると、ログインウィンドウが閉じ、ステータスが現在のユーザー名に変更されます。この記事では、AJAX がどのように実装しているかを主に紹介します。必要な友達はそれを参照できます

ログインボタンをクリックすると、ログインウィンドウが表示されます。正しいユーザー名とパスワードを入力してログインをクリックすると、ログインウィンドウが閉じてステータスが表示されます。現在のユーザー名に変更します。

ステップ 1:

まず、ポップアップウィンドウで jquery-ui のコントロールを使用します。最初のステップは、その使用方法を学習することです

開発バンドルを開きます。解凍された jquery-UI でデモを実行し、index.html を見つけて、ダイアログの下のモデルダイアログを選択し、右クリックしてソースコードを表示し、コントロールの使用方法を観察して、キーコード $("#dialog-modal" を見つけます。 ).dialog({height: 140, modal: true}); これは表示用です。モデルメッセージ内のソースコードを開き、閉じるキーコードを見つけます。 $( this).dialog('close'); 2行のコードでウィンドウの表示と終了を制御でき、次のステップに進むことができます。使用する場合は、jquery-ui開発パッケージのcssフォルダーとjsフォルダーをプロジェクトにコピーする必要があります

。

2 番目のステップ:

AJAX リクエストを処理するための一般的なハンドラーのコードをここに投稿します。これを作成する前に使用しますが、便宜上、ここで詳細にリストすることはできません。理解するために、まず一般的なハンドラーを投稿します。コード:

1.IsLogin.ashx。ユーザーがログインしているかどうかを判断するために使用されます。ログインしている場合、ユーザー名が返されることに注意してください。一般的なハンドラーでセッションを使用するには、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 は、ユーザーのログアウトを制御し、セッションを空に設定するために使用されます。

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

ログイン後にコピー

のコードは以上です。メインインターフェイスは以下に掲載されています:

<!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") {
     $("#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(&#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") {
      $("#divLogin").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">
  <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>

ログイン後にコピー