AJAX 비새로고침 로그인 기능 구현 방법-PHP 튜토리얼-php.cn

집

백엔드 개발

PHP 튜토리얼

AJAX 비새로고침 로그인 기능 구현 방법

迷茫

Jan 24, 2017 pm 01:30 PM

로그인 버튼을 클릭하면 로그인 창이 팝업됩니다. 올바른 사용자 이름과 비밀번호를 입력하고 로그인을 클릭하면 로그인 창이 닫히고 현재 사용자 이름으로 상태가 변경됩니다. 이 글에서는 AJAX 방법을 주로 소개합니다. 새로고침 없는 로그인 기능을 구현했습니다. 다음

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

1단계:

먼저 팝업 창은 jquery-ui의 컨트롤을 사용합니다.

압축 해제된 jquery-UI에서 development-bundle->demos를 열고 index.html을 찾고, 대화 상자에서 모델 대화 상자를 선택하고, 소스 코드를 보려면 마우스 오른쪽 버튼을 클릭하세요. 컨트롤 사용 방법을 관찰하고 키 코드를 찾으세요. $("#dialog-modal").dialog({height: 140,modal: true}) 이것은 사용됩니다. 표시되는 경우 모델 메시지에서 소스 코드를 엽니다. 그리고 닫기를 위한 키 코드를 찾습니다: $(this).dialog('close'); 이 두 줄의 코드를 사용하면 창 표시 및 닫기를 제어할 수 있으며 다음 단계로 진행할 수 있습니다. jquery-ui 개발 패키지의 css 폴더와 js 폴더를 프로젝트에 복사합니다.

2단계:

AJAX 요청을 처리하기 위한 일반 핸들러의 코드를 여기에 게시합니다. 실제로 작성하기 전에 사용하지만, 여기서는 이해를 돕기 위해 단계별로 자세히 나열하는 것이 불가능합니다. 먼저 일반 처리 프로그램 코드를 게시하겠습니다:

1.IsLogin .ashx, use 사용자가 로그인했는지 확인하기 위해 로그인 시 사용자 이름이 반환됩니다. 여기서 주의할 점은 일반 처리 프로그램에서 세션을 사용하려면 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>

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

PHP와 Python : 다른 패러다임이 설명되었습니다Apr 18, 2025 am 12:26 AM

PHP는 주로 절차 적 프로그래밍이지만 객체 지향 프로그래밍 (OOP)도 지원합니다. Python은 OOP, 기능 및 절차 프로그래밍을 포함한 다양한 패러다임을 지원합니다. PHP는 웹 개발에 적합하며 Python은 데이터 분석 및 기계 학습과 같은 다양한 응용 프로그램에 적합합니다.

PHP와 Python : 그들의 역사에 깊은 다이빙Apr 18, 2025 am 12:25 AM

PHP는 1994 년에 시작되었으며 Rasmuslerdorf에 의해 개발되었습니다. 원래 웹 사이트 방문자를 추적하는 데 사용되었으며 점차 서버 측 스크립팅 언어로 진화했으며 웹 개발에 널리 사용되었습니다. Python은 1980 년대 후반 Guidovan Rossum에 의해 개발되었으며 1991 년에 처음 출시되었습니다. 코드 가독성과 단순성을 강조하며 과학 컴퓨팅, 데이터 분석 및 기타 분야에 적합합니다.

PHP와 Python 중에서 선택 : 가이드Apr 18, 2025 am 12:24 AM

PHP는 웹 개발 및 빠른 프로토 타이핑에 적합하며 Python은 데이터 과학 및 기계 학습에 적합합니다. 1.PHP는 간단한 구문과 함께 동적 웹 개발에 사용되며 빠른 개발에 적합합니다. 2. Python은 간결한 구문을 가지고 있으며 여러 분야에 적합하며 강력한 라이브러리 생태계가 있습니다.

PHP 및 프레임 워크 : 언어 현대화Apr 18, 2025 am 12:14 AM

PHP는 현대화 프로세스에서 많은 웹 사이트 및 응용 프로그램을 지원하고 프레임 워크를 통해 개발 요구에 적응하기 때문에 여전히 중요합니다. 1.PHP7은 성능을 향상시키고 새로운 기능을 소개합니다. 2. Laravel, Symfony 및 Codeigniter와 같은 현대 프레임 워크는 개발을 단순화하고 코드 품질을 향상시킵니다. 3. 성능 최적화 및 모범 사례는 응용 프로그램 효율성을 더욱 향상시킵니다.

PHP의 영향 : 웹 개발 및 그 이상Apr 18, 2025 am 12:10 AM

phphassignificallyimpactedwebdevelopmentandextendsbeyondit

스칼라 유형, 반환 유형, 노조 유형 및 무효 유형을 포함한 PHP 유형의 힌트 작업은 어떻게 작동합니까?Apr 17, 2025 am 12:25 AM

PHP 유형은 코드 품질과 가독성을 향상시키기위한 프롬프트입니다. 1) 스칼라 유형 팁 : PHP7.0이므로 int, float 등과 같은 기능 매개 변수에 기본 데이터 유형을 지정할 수 있습니다. 2) 반환 유형 프롬프트 : 기능 반환 값 유형의 일관성을 확인하십시오. 3) Union 유형 프롬프트 : PHP8.0이므로 기능 매개 변수 또는 반환 값에 여러 유형을 지정할 수 있습니다. 4) Nullable 유형 프롬프트 : NULL 값을 포함하고 널 값을 반환 할 수있는 기능을 포함 할 수 있습니다.

PHP는 객체 클로닝 (클론 키워드) 및 __clone 마법 방법을 어떻게 처리합니까?Apr 17, 2025 am 12:24 AM

PHP에서는 클론 키워드를 사용하여 객체 사본을 만들고 \ _ \ _ Clone Magic 메소드를 통해 클로닝 동작을 사용자 정의하십시오. 1. 복제 키워드를 사용하여 얕은 사본을 만들어 객체의 속성을 복제하지만 객체의 속성은 아닙니다. 2. \ _ \ _ 클론 방법은 얕은 복사 문제를 피하기 위해 중첩 된 물체를 깊이 복사 할 수 있습니다. 3. 복제의 순환 참조 및 성능 문제를 피하고 클로닝 작업을 최적화하여 효율성을 향상시키기 위해주의를 기울이십시오.

PHP vs. Python : 사용 사례 및 응용 프로그램Apr 17, 2025 am 12:23 AM

PHP는 웹 개발 및 컨텐츠 관리 시스템에 적합하며 Python은 데이터 과학, 기계 학습 및 자동화 스크립트에 적합합니다. 1.PHP는 빠르고 확장 가능한 웹 사이트 및 응용 프로그램을 구축하는 데 잘 작동하며 WordPress와 같은 CMS에서 일반적으로 사용됩니다. 2. Python은 Numpy 및 Tensorflow와 같은 풍부한 라이브러리를 통해 데이터 과학 및 기계 학습 분야에서 뛰어난 공연을했습니다.

See all articles