AJAX如何实现无刷新登录功能

2024-09-28 10:13:02

最近学习了如何实现无刷新登录,大体的效果如下(界面比较丑,请自行忽略....):

点击登录按钮时弹出登录窗口,输入正确的用户名密码后点击登录则登录窗口关闭,状态改为当前用户名.

第一步:

首先弹出窗口使用的是jquery-ui中的控件,第一步要学会如何使用.

打开解压后的jquery-UI下的development-bundle->demos,找到index.html,选择dialog下的model dialog,右键查看源码,观察如何使用该控件,找到一句关键代码:$("#dialog-modal").dialog({height: 140,modal: true});这是用于显示的,打开model message中的源码,找到关闭的关键代码:$(this).dialog('close');有了这两句代码,可以控制窗口的显示与关闭,可以进行下一步了.使用时需复制jquery-ui开发包的css文件夹,js文件夹到项目中.

第二步:

在这里先贴出处理AJAX请求的一般处理程序的代码,虽然正真写的时候都是用到再写,但这里不可能一步一步详细列出,为了便于理解,先将一般处理程序代码贴出来:

1.IsLogin.ashx,用于判断用户是否登录,登录则返回用户名.这里注意,在一般处理程序中要使用session,必须引入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,用于控制用户登出,设置session为空.

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

一般处理程序就结束了,下面贴出主界面的代码:

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

以上所述是小编给大家介绍的AJAX如何实现无刷新登录功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

PHP+jQuery+Ajax实现用户登录与退出

用户登录与退出功能应用在很多地方,而在有些项目中,我们需要使用Ajax方式进行登录,登录成功后只刷新页面局部,从而提升了用户体验度.本文将使用PHP和jQuery来实现登录和退出功能. 准备数据库本例我们使用Mysql数据库,创建一张user表,表结构如下: CREATE TABLE `user` ( `id` int(11) NOT NULL auto_increment, `username` varchar(30) NOT NULL COMMENT '用户名', `password` v
一款经典的ajax登录页面后台asp.net

下面实现一个经典的登录页面,有保存密码功能,页面上所有的控件都是html控件,没有服务器控件 1,新建一名为login.htm的静态网页文件,作为登录页面,如图 body标签代码 Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> 复制代码代码如下: <body onkeydown ="enterLogin()"> &
asp.net jQuery Ajax用户登录功能的实现

主页面调用代码片段: 复制代码代码如下: <asp:HyperLink ID="lnkLogin" runat="server" NavigateUrl="#" >登录</asp:HyperLink> <script language="javascript" type="text/javascript"> $('#<%=this.lnkLogin.ClientI
jquery ajax 登录验证实现代码

使用 jquery 框架:下载 jquery.js 新建一个 web 工程 ajax : 在 webRoot 下新建一个 jslib 文件夹:专门存放 js 文件: 在 webRoot 下新建一个 html/jsp 页面: login.html 复制代码代码如下: <script type = "text/javascript" src = "jslib/jquery.js"></ script> <script type = &qu
jQuery基于ajax实现页面加载后检查用户登录状态的方法

本文实例讲述了jQuery基于ajax实现页面加载后检查用户登录状态的方法.分享给大家供大家参考,具体如下: 拥有会员功能的网站,如果会员已经登录,那么要显示相应的登录状态,而且这种显示的需求是在网站的每个页面都有的(目前国内网站貌似都是这么做的,还没有见过其他形式的状态显示方式),这样,在打开一个新的页面时就要知道这个会员是否已经登录,需要判断登录的状态. 1.解决方案. 为了能够实现在每一个页面判断会员登录状态的功能,我采用了页面时通过ajax传递参数通过后端返回的登录状态结果进行判断,当然
jQuery+Ajax用户登录功能的实现

ok,先来贴几张张效果图. 其中大致流程是用户点击页面右上角的登录链接接着弹出div模拟窗口,该窗口通过iframe调用Login.aspx页面,用户输入用户名密码和验证码后,Login.aspx页面的jQuery代码post到Login.ashx页面处理,Login.ashx页面可以算是简易的aspx页面吧. 当然你用LoginProcess.aspx 也是可以的.Login.ashx页面处理完把结果返回给Login.aspx页面处理,result变量用与接收结果. 如果返回1表示登录成功,
基于jquery ajax 用户无刷新登录方法详解

Ajax框架就是提供模块化实现Ajax功能的集合,Ajax框架可以是各种语言实现的(比如SAJAX有各种语言的实现),Ajax只是jquery中的一部分, 实例1 复制代码代码如下: $.ajax({ type:'post',//可选get url:'action.php',//这里是接收数据的PHP程序 data:'data='dsa',//传给PHP的数据,多个参数用&连接 dataType:'text',//服务器返回的数据类型可选XML ,Json jsonp script html
Ajax实现带有验证码的局部刷新登录界面

现在的登录界面大多数都带有:验证码的功能+验证码局部刷新+ajax登录.用ajax登录的好处最明显就是速度快,URL地址没有变化.所有现在登录功能很少再用form表单post提交了,大多数都已经采用了ajax局部访问后台然后解析返回值并显示结果到界面上面.理论还是要拿来实践才能验证的,下面直接上代码. 运行界面: 1.验证码后台访问部分上一篇博客已经介绍多了,这里介绍如何利用img中src实现局部刷新验证码的功能. html部分: <p><label class="lbrigh
jQuery Ajax 实现在html页面实时显示用户登录状态

当网站是全静态的html页面时,而又希望网站会员在登录之后并在所有页面头部显示登录状态,如用户名等,如果未登录就是未登录状态,下面给大家来分享实现的方法. 一.在html静态页面中加入div,并指定ID 如: <div id="ajaxlogin"></div> 二.新建一个动态的ajaxlogin.php文件,用来判断用户是否登录了代码如下: <? session_start(); if( $_SESSION['u_login']=='turelogi
ajax实现登录功能

AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). ajax的优点: 1.最大的一点是页面无刷新,用户的体验非常好. 2.使用异步方式与服务器通信,具有更加迅速的响应能力.. 3.可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本.并且减轻服务器的负担,ajax的原则是"按需取数据",可以最大程度的减少冗余请求,和响应对服务器造成的负担. 4.基

AJAX如何实现无刷新登录功能

相关推荐

随机推荐