基于Ajax技术实现无刷新用户登录功能

前端  /  管理员 发布于 5年前   293

代码如下:

// JScript 文件function usersLogon(){  var userName = document.getElementById("txtuserName").value;  var password = document.getElementById("txtpassword").value;  var checkCode = document.getElementById("txtCheckCode").value;  var response = userControl_logon.CheckCodeIsRight(checkCode).value;  if(userName == "")  {    document.getElementById("txtuserName").focus();    return false;  }  else if(password == "")  {    document.getElementById("txtpassword").focus();    return false;  }  else if(checkCode =="")  {    document.getElementById("txtCheckCode").focus();    return false;  }  else  {    if(response == true)    {      //判断用户是否存在      userControl_logon.userNameAndPasswordIsExist(userName,password,userNameIsRight);    }    else    {      alert("验证码出错");      userControl_logon.checkCodeOperaotr(refreshCheckCode);      document.getElementById("txtpassword").value = "";    }  }  }function userNameIsRight(res){  var userName = document.getElementById("txtuserName").value;  if(res.value == true)  {    //用户存在,但要看此用户有没有进入管理留言版权限,    userControl_logon.userNameIsRight(userName,CallBack);  }  else  {    alert("用户名或密码错误");    document.getElementById("txtpassword").value = "";    OnLoad_checkCode();  }}function CallBack(res){  if(res.value == true)  {    hideLogon();    var url = userControl_logon.returnUrl();    if ( url.value == 404)    {      showDefault();    }    else    {      document.getElementById("Url").innerHTML = '<a href="//article/' + url.value + '">' + url.value + '</a>'    }  }  else  {    alert("对不起你的权限不够");    document.getElementById("txtpassword").value = "";    OnLoad_checkCode();  }}//隐藏登录框function hideLogon(){  var element = document.getElementById("hideLogon")  element.style.display = "none"  }//显示返回首页function showDefault(){  var element = document.getElementById("Returndefault")  element.style.display = "block" }function OnLoad_checkCode(){  userControl_logon.checkCodeOperaotr(refreshCheckCode);  document.getElementById("txtuserName").focus();  //  return false;}///重新得到新的验证吗function refreshCheckCode(res){   document.getElementById("txtCheckCode").value = "";  document.getElementById("lblNumber").innerHTML = res.value;}function abce(){  alert(document.getElementById("lblNumber").value)}

下面代码

using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using System.Drawing;using LHB_SQL_2005;public partial class userControl_logon : System.Web.UI.UserControl{  protected void Page_Load(object sender, EventArgs e)  {    if (!this.IsPostBack)    {      AjaxPro.Utility.RegisterTypeForAjax(typeof(userControl_logon));    }  }  [AjaxPro.AjaxMethod]  public static string checkCodeOperaotr()  {    string _checkCode = GeneralMethod.GenerateCheckCode();    System.Web.HttpContext.Current.Session["checkCode"] = _checkCode;    //返回验证码    return _checkCode;  }  /// <summary>  /// 判断验证是否正确  /// </summary>  /// <param name="checkCode"></param>  /// <returns></returns>  [AjaxPro.AjaxMethod]  public static bool CheckCodeIsRight(string checkCode)  {    string _checkCode = (string)(System.Web.HttpContext.Current.Session["checkCode"]);     if (_checkCode == checkCode)    {      return true;    }    else    {      return false;    }  }  /// <summary>  /// 判断用户名及密码添加是否正确  /// </summary>  /// <param name="userName">用户名</param>  /// <param name="_password">用户名密码</param>  /// <returns>bool</returns>  [AjaxPro.AjaxMethod]  public static bool userNameAndPasswordIsExist(string userName, string _password)  {    string password = GeneralMethod.ToEncryptPassword(_password);    string executeString = "SELECT COUNT(*) FROM users WHERE userName = '" + userName.ToString() + "' AND password = '" + password + "'";    int count = int.Parse(GetCommand.ExecuteScalar(executeString));    if (count == 1)    {      System.Web.HttpContext.Current.Session["userName"] = userName;      return true;    }    else    {      return false;    }  }  /// <summary>  /// 判断用户是不是有这进入管理留言版的权限  /// </summary>  /// <param name="userName">用户名</param>  /// <returns></returns>  [AjaxPro.AjaxMethod]  public static bool userNameIsRight(string userName)  {    string executeString = "SELECT [right] FROM role WHERE usersId = (select userNameId from users where userName = '" + userName + "')";    int count = int.Parse(GetCommand.ExecuteScalar(executeString));    if (count > 0)    {      return true;    }    else    {      return false;    }  }  /// <summary>  /// 返回Url值  /// </summary>  /// <returns></returns>  [AjaxPro.AjaxMethod]  public static string returnUrl()  {    string url = "";    try    {      url = System.Web.HttpContext.Current.Session["url"].ToString();    }    catch    {      url ="404";    }    return url;  }}

下面是页面代码

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="logon.ascx.cs" Inherits="userControl_logon" %><script language="javascript" type="text/javascript" src="//article/../JavaScript/logon.js"></script><script language="javascript" type="text/javascript" src=""></script><link href="//article/../CSS/table_css.css" rel="stylesheet" type="text/css" /><link href="//article/CSS/table_css.css" rel="stylesheet" type="text/css" /><body onload="OnLoad_checkCode();"><div><table border="0" cellpadding="0" cellspacing="0">    <tr>      <td>        <table id="hideLogon" border="0" cellpadding="0" cellspacing="0" style="display:block;">          <tr>            <td style="background-color: #99ccff">用户名：</td>            <td><input type="text" id="txtuserName" style="width: 105px" /></td>          </tr>          <tr>            <td style="background-color: #99ccff">密 码：</td>            <td>              <input id="txtpassword" type="password" style="width: 105px" /></td>          </tr>          <tr>            <td style="background-color: #99ccff">验证码：</td>            <td style="background-color: #99ccff">              <input type= "text" id="txtCheckCode" style=" width:60px" /><label id="lblNumber"></label></td>          </tr>          <tr>            <td style="background-color: #99ccff"></td>            <td style="background-color: #99ccff">              <input type="button" onclick="usersLogon();" value="登录" id="btnLogon" /></td>          </tr>        </table>      </td>    </tr>    <tr>      <td >        <div id="Url"></div>      </td>    </tr>    <tr>      <td align="center">        <table id="Returndefault" border="0" cellpadding="0" cellspacing="0" style="display:none;">          <tr>            <td>              <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default.aspx">返回首页</asp:HyperLink></td>          </tr>        </table>      </td>    </tr>  </table></div></body>

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