首頁 web前端 js教程 基於Ajax技術來實現無刷新使用者登入(附程式碼)

基於Ajax技術來實現無刷新使用者登入(附程式碼)

Apr 02, 2018 pm 04:34 PM
ajax 重新整理 實現

這次帶給大家基於Ajax技術來實現無刷新用戶登入(附程式碼),基於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="&#39; + url.value + &#39;">' + 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();">
<p>
<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 >
        <p id="Url"></p>
      </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>
</p>
</body>
登入後複製

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

AJAX實作不刷新登入

新必學的Ajax總結

以上是基於Ajax技術來實現無刷新使用者登入(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

F5刷新金鑰在Windows 11中不起作用 F5刷新金鑰在Windows 11中不起作用 Mar 14, 2024 pm 01:01 PM

您的Windows11/10PC上的F5鍵是否無法正常運作? F5鍵通常用於刷新桌面或資源管理器或重新載入網頁。然而,我們的一些讀者報告說,F5鍵正在刷新他們的計算機,並且無法正常工作。如何在Windows11中啟用F5刷新?要刷新您的WindowsPC,只需按下F5鍵即可。在某些筆記型電腦或桌上型電腦上,您可能需要按下Fn+F5組合鍵才能完成刷新操作。為什麼F5刷新不起作用?如果按下F5鍵無法刷新您的電腦或在Windows11/10上遇到問題,可能是因為功能鍵被鎖定。其他潛在原因包括鍵盤或F5鍵

華為手機如何實現雙微信登入? 華為手機如何實現雙微信登入? Mar 24, 2024 am 11:27 AM

華為手機如何實現雙微信登入?隨著社群媒體的興起,微信已成為人們日常生活中不可或缺的溝通工具之一。然而,許多人可能會遇到一個問題:在同一部手機上同時登入多個微信帳號。對於華為手機用戶來說,實現雙微信登入並不困難,本文將介紹華為手機如何實現雙微信登入的方法。首先,華為手機自帶的EMUI系統提供了一個很方便的功能-應用程式雙開。透過應用程式雙開功能,用戶可以在手機上同

PHP程式設計指南:實作斐波那契數列的方法 PHP程式設計指南:實作斐波那契數列的方法 Mar 20, 2024 pm 04:54 PM

程式語言PHP是一種用於Web開發的強大工具,能夠支援多種不同的程式設計邏輯和演算法。其中,實作斐波那契數列是一個常見且經典的程式設計問題。在這篇文章中,將介紹如何使用PHP程式語言來實作斐波那契數列的方法,並附上具體的程式碼範例。斐波那契數列是一個數學上的序列,其定義如下:數列的第一個和第二個元素為1,從第三個元素開始,每個元素的值等於前兩個元素的和。數列的前幾元

PHP 與 Ajax:建立一個自動完成建議引擎 PHP 與 Ajax:建立一個自動完成建議引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax建置自動完成建議引擎:伺服器端腳本:處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本:發送Ajax請求並顯示建議(autocomplete.js)。實戰案例:在HTML頁面中包含腳本並指定search-input元素識別碼。

如何在華為手機上實現微信分身功能 如何在華為手機上實現微信分身功能 Mar 24, 2024 pm 06:03 PM

如何在華為手機上實現微信分身功能隨著社群軟體的普及和人們對隱私安全的日益重視,微信分身功能逐漸成為人們關注的焦點。微信分身功能可以幫助使用者在同一台手機上同時登入多個微信帳號,方便管理和使用。在華為手機上實現微信分身功能並不困難,只需要按照以下步驟操作即可。第一步:確保手機系統版本和微信版本符合要求首先,確保你的華為手機系統版本已更新至最新版本,以及微信App

掌握Golang如何實現遊戲開發的可能性 掌握Golang如何實現遊戲開發的可能性 Mar 16, 2024 pm 12:57 PM

在現今的軟體開發領域中,Golang(Go語言)作為一種高效、簡潔、並發性強的程式語言,越來越受到開發者的青睞。其豐富的標準庫和高效的並發特性使它成為遊戲開發領域的一個備受關注的選擇。本文將探討如何利用Golang來實現遊戲開發,並透過具體的程式碼範例來展示其強大的可能性。 1.Golang在遊戲開發中的優勢作為靜態類型語言,Golang正在建構大型遊戲系統

如何解決jQuery AJAX報錯403的問題? 如何解決jQuery AJAX報錯403的問題? Feb 23, 2024 pm 04:27 PM

如何解決jQueryAJAX報錯403的問題?在開發網頁應用程式時,經常會使用jQuery來發送非同步請求。然而,有時在使用jQueryAJAX時可能會遇到錯誤代碼403,表示伺服器禁止存取。這種情況通常是由伺服器端的安全性設定所導致的,但可以透過一些方法來解決這個問題。本文將介紹如何解決jQueryAJAX報錯403的問題,並提供具體的程式碼範例。一、使

PHP遊戲需求實作指南 PHP遊戲需求實作指南 Mar 11, 2024 am 08:45 AM

PHP遊戲需求實現指南隨著網路的普及和發展,網頁遊戲的市場也越來越火爆。許多開發者希望利用PHP語言來開發自己的網頁遊戲,而實現遊戲需求是其中一個關鍵步驟。本文將介紹如何利用PHP語言來實現常見的遊戲需求,並提供具體的程式碼範例。 1.創造遊戲角色在網頁遊戲中,遊戲角色是非常重要的元素。我們需要定義遊戲角色的屬性,例如姓名、等級、經驗值等,並提供方法來操作這些

See all articles