How to implement AJAX non-refresh login function

When you click the login button, a login window will pop up. After entering the correct username and password and clicking login, the login window will close and the status will be changed to the current username. This article mainly introduces how AJAX implements the refresh-free login function. Friends who need it can refer to it. Next

When you click the login button, a login window will pop up. After entering the correct username and password and clicking login, the login window will close and the status will be changed to the current username.

Step 1:

First of all, the pop-up window uses the controls in jquery-ui. The first step is to learn how to use it.

Open the development-bundle->demos under the decompressed jquery-UI and find index.html , select the model dialog under dialog, right-click to view the source code, observe how to use the control, and find a key code: $("#dialog-modal").dialog({height: 140,modal: true}); This is used If displayed, open the source code in the model message and find the key code for closing: $(this).dialog('close'); with these two lines of code, you can control the display and closing of the window, and you can proceed to the next step. Use You need to copy the css folder and js folder of the jquery-ui development package to the project.

Step 2:

Post the code of the general handler for handling AJAX requests here. , although when I actually write, I use it before writing, but it is impossible to list it in detail step by step here. In order to facilitate understanding, I will post the general handler code first:

1.IsLogin.ashx, use To determine whether the user is logged in, the user name will be returned when logging in. Note here that to use session in the general processing program, using System.Web.SessionState must be introduced and the IRequiresSessionState interface must be implemented

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;
namespace AJAX无刷新登录.AJAX
{
 /// 

 /// IsLogin 的摘要说明
 /// 
 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, Used to detect whether the user name and password entered by the user match. If it is correct, it will return yes, if it is wrong, it will return no. For simplicity, the database is not connected here.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;
namespace AJAX无刷新登录.AJAX
{
 /// 

 /// CheckLogin 的摘要说明
 /// 
 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, used to control user logout, set the session to Empty.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;
namespace AJAX无刷新登录.AJAX
{
 /// 

 /// LoginOut 的摘要说明
 /// 
 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;
   }
  }
 }
}

The general processing program is over. The code of the main interface is posted below:

 


 
 
 
 
 
 



 

  

   
   
  
  

   
   
  
  

   

    

     
用户名：
     

      
    
    

     
密码：