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

代码如下:

// 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="' + 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="../javascript/logon.js">
</script>
<script language="javascript" type="text/javascript" src="javascript/logon.js">
</script>
<link href="../css/table_css.css" rel="stylesheet" type="text/css" />
<link href="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技术实现无刷新用户登录功能，希望对大家有所帮助