主頁(yè) > 知識(shí)庫(kù) > div彈出層的ajax登錄(Jquery版+c#)

div彈出層的ajax登錄(Jquery版+c#)

熱門標(biāo)簽:服務(wù)器配置 銀行業(yè)務(wù) 團(tuán)購(gòu)網(wǎng)站 科大訊飛語(yǔ)音識(shí)別系統(tǒng) 阿里云 Linux服務(wù)器 電子圍欄 Mysql連接數(shù)設(shè)置

頁(yè)面初始化,界面如圖所示:

Server name文本框獲取焦點(diǎn)時(shí)候,界面如圖所示(這里可以改成你登錄的驗(yàn)證碼):

可以加載SQL Server服務(wù)列表,也是我的簡(jiǎn)易SQL查詢分析器評(píng)論中靜夜妙思給予的方法,非常感謝!

加載列表如下圖所示:

可以隨意地點(diǎn)擊添加到Server name中,登錄時(shí)截圖所示:

文本框驗(yàn)證都寫好了!還有Authentication驗(yàn)證方式,windows驗(yàn)證下面Login,Password文本框禁掉!由于時(shí)間原因,不上圖了

demo.html(全部前臺(tái)代碼,js/css還沒(méi)分文件存儲(chǔ))

復(fù)制代碼 代碼如下:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html xmlns="http://www.w3.org/1999/xhtml">
title>DataBase Test Demo/title>
link href="js/treeview/jquery.treeview.css" rel="stylesheet" type="text/css" />
!--script src="js/jquery-1.4.2-vsdoc.js" type="text/javascript">/script>-->
script src="js/jquery-1.4.2.min.js" type="text/javascript">/script>
script src="js/treeview/jquery.treeview.js" type="text/javascript">/script>
style type="text/css">
body{margin:0 auto;font-family:Verdana;font-size:12px;}
.top{margin:0 auto; width:100%; text-align:center; margin-top:20px;}
#browser{display:none;}
/style>
/head>
body>
div class="top">h1>DataBase Test Demo/h1>/div>
ul id="browser" class="databasetree">
li >span class="server">SQL Server/span>
ul>
li class="closed">span class="folder">DataBases/span>
ul>
li class="closed">span class="database">Test/span>
ul>/ul>
/li>

/ul>
/li>
/ul>
/li>
/ul>
style type="text/css">
#greybackground{background: #000;display: block;z-index: 100;width: 100%;position: absolute;top: 0;left: 0; }
#login{margin:0 auto;width:420px;height:auto;border:solid 1px #ccc;position:absolute;z-index:200;background-color:#fff;}
#login .heard{width:420px; height:29px;background-image:url(images/top_bg.gif); border-bottom:solid 1px #ccc;}
#login .heard .left{float:left;line-height:29px;margin-right:2px;padding-left:10px; color:#5aa608;}
#login .heard .right{float:right;line-height:29px;margin-right:5px;}
#login .heard .right a{color:#999;text-decoration:none;}
#login .heard .right a:hover{color:red;text-decoration:underline;}
#login .content{width:420px; height:200px;}
#login .content li{ list-style:none; padding:5px 0px 5px 30px;}
#login .content .top{ width:100%; margin-top:5px;height:30px;line-height:30px;}
#login .content .top .left{ float:left;width:120px; text-align:right;}
#login .content .top .right{ float:right;width:280px;text-align:right;padding-right:20px;}
#login input,#login,select,#login,button{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%;}
#login input{width: 80%;padding: 7px 7px 6px;border-color: #B3B3B3 #EAEAEA #EAEAEA #B3B3B3;border-style: solid;border-width: 1px;color:black;}
#login select{width: 86%;padding: 7px 7px 6px; border-color: #B3B3B3 #EAEAEA #EAEAEA #B3B3B3;border-style: solid;border-width: 1px;color:black;}
#login button,#login .btn-submit,#login .button,#login .btn-submit:focus,#login .button:focus,.btn-submit,.button{border-left: 1px solid #C6C6C6;
border-right: 1px solid #DDDDDD;border-top: 1px solid #DDDDDD;border-bottom: 1px solid #C6C6C6;
cursor:pointer;width:auto;margin:0 10px 0 0;padding-bottom:3px;line-height:1.3em;
color:#515151;font-weight:bold;background:url(images/button.png) #e5e3e3 repeat-x 0 0;
height:32px;padding-left:12px;padding-right: 12px;padding-top: 6px;}
#login button:hover,#login .btn-submit:hover,.button:hover,.btn-submit:hover {background-image:none;}
#login .btn-submit,#login .btn-submit:focus,.btn-submit {width:auto;border-color:#5C91A4 #2B7089 #1A6480 #2A6F89;background-image:url(images/button_highlight.png);background-color:#4e85bb;color:#fff;}
#login .bottom-btn{width:90%; margin:0 auto; padding-top:7px; border-top:1px #ccc solid; margin-top:5px;}

#layer{position:relative;}
#poper{position:absolute;z-index:10;display:none;left:39px;border:solid 1px #ccc; background-color:#fff;}

#poper .heard{height:25px;line-height:25px; width:100%;text-align:right; }
#poper .heard a{color:#999;text-decoration:none;}
#poper .heard a:hover{color:red;text-decoration:underline;}
#poper .first{height:30px;line-height:30px; width:100%;text-align:center; color:#5aa608;}
#poper .first a{color:#5aa608;text-decoration:underline;}
#poper .second{height:20px;line-height:20px; width:100%;text-align:left; margin-left:10px;}
#poper .second a{color:#999; text-decoration:none;}
#poper .second a:hover{color:#5aa608; text-decoration:underline;}
/style>
div id="login">
div class="heard">div class="left">Connect to Server/div>div class="right">a href="javascript:void(0);" id="login_close" title="close">close/a>/div>/div>
div class="content">
div class="top">
div class="left">Server name:/div>
div class="right">
div id="layer">
input id="txtServer" type="text" />
div id="poper">
div class="heard">a id="layer_close" href="javascript:void(0);" title="close">close/a>nbsp;nbsp;/div>
div class="first">a id="loadServer" href="javascript:void(0);" title="點(diǎn)擊加載SQL Server服務(wù)列表">點(diǎn)擊加載SQL Server服務(wù)列表/a>/div>
/div>
/div>
/div>
/div>
div class="top">div class="left">Authentication:/div>div class="right">select id="selectAuthentication">option value="windows">Windows Authentication/option>option value="sql" selected="selected">SQL Server Authentication/option>/select>/div>/div>
div class="top">div class="left">Login:/div>div class="right">input id="txtUserName" type="text" />/div>/div>
div class="top">div class="left">Password:/div>div class="right">input id="txtPassword" type="password" />/div>/div>
div class="bottom-btn">input id="btnConnect" type="button" class="btn-submit" value="Connect" />input id="btnCancel" type="button" class="button" value="Cancel" />font id="message">/font>/div>
/div>
/div>
/body>
/html>
script type="text/javascript">
$(document).ready(function() {
$("#browser").treeview();

$("#selectAuthentication").change(function() {
if ($(this).val() == "windows") {
$("#txtUserName,#txtPassword").css("background-color", "#eee");
$("#txtUserName,#txtPassword").attr("disabled", "disabled");
} else {
$("#txtUserName,#txtPassword").css("background-color", "#fff");
$("#txtUserName,#txtPassword").removeAttr("disabled");
}
});

$("#txtServer").focus(function() { $("#poper").fadeIn("fast"); });

$("#poper").css({ "top": $("#txtServer").outerHeight() + 1, "width": $("#txtServer").outerWidth() });

$("#layer_close").click(function() {
$(this).parent().parent().fadeOut("fast");
});

$("#loadServer").click(function() {
$.ajax({
type: "get",
dataType: "text",
timeout: 300000,
url: "ashx/Handler.ashx",
data: "flag=server",
beforeSend: function() { $("#loadServer").fadeOut("fast"); $("#poper .first").html("img src='images/ajax-loader.gif' title='正在加載中,請(qǐng)稍后……' />正在加載中,請(qǐng)稍后……") },
success: function(data) {
if (data == "error") {
$("#poper .first").html("font color=red>服務(wù)列表加載失敗,請(qǐng)刷新重新加載/font>");
} else if (data == "empty") {
$("#poper .first").html("font color=red>沒(méi)有數(shù)據(jù),請(qǐng)手動(dòng)填寫/font>");
} else {
$("#poper .first").remove();
$("#poper").append(data);
alink();
}
},
error: function() { $("#poper .first").html("font color=red>系統(tǒng)發(fā)生錯(cuò)誤,請(qǐng)聯(lián)系管理員!/font>"); }
});
});
})


$("#btnConnect").click(function() {
if ($("#selectAuthentication").val() == "sql") { //SQL Server Authentication
if ($("#txtServer").val().length 1) {
$("#message").css("color", "red"); $("#message").html("請(qǐng)輸入Server name");
} else if ($("#txtUserName").val().length 1) {
$("#message").css("color", "red"); $("#message").html("請(qǐng)輸入Login");
} else if ($("#txtPassword").val().length 1) {
$("#message").css("color", "red"); $("#message").html("請(qǐng)輸入Password");
} else {
$.ajax({
type: "get",
dataType: "text",
timeout: 300000,
url: "ashx/Handler.ashx",
data: "flag=loginsqlServer=" + encodeURIComponent($("#txtServer").val()) + "user=" + encodeURIComponent($("#txtUserName").val()) + "password=" + encodeURIComponent($("#txtPassword").val()),
beforeSend: function() { $("#message").css("color", "#5aa608"); $("#message").html("img src='images/ajax-loader.gif' title='正在加載中,請(qǐng)稍后……' />正在驗(yàn)證,請(qǐng)稍后……"); },
success: function(data) {
if (data == "True") {
$("#message").html("");
hideLogin();
$("#browser").fadeIn("fast");
}
},
error: function() { $("#message").css("color", "red"); $("#message").html("登錄失敗"); }
});
}
}
});

$(function() {
var screenwidth, screenheight, mytop, getPosLeft, getPosTop
screenwidth = $(window).width();
screenheight = $(window).height();
//獲取滾動(dòng)條距頂部的偏移
mytop = $(document).scrollTop();
//計(jì)算彈出層的left
getPosLeft = screenwidth / 2 - 200;
//計(jì)算彈出層的top
getPosTop = screenheight / 2 - 150;
//css定位彈出層
$("#login").css({ "left": getPosLeft, "top": getPosTop });
//當(dāng)瀏覽器窗口大小改變時(shí)
$(window).resize(function() {
screenwidth = $(window).width();
screenheight = $(window).height();
mytop = $(document).scrollTop();
getPosLeft = screenwidth / 2 - 200;
getPosTop = screenheight / 2 - 150;
$("#login").css({ "left": getPosLeft, "top": getPosTop + mytop });
});
//當(dāng)拉動(dòng)滾動(dòng)條時(shí),彈出層跟著移動(dòng)
$(window).scroll(function() {
screenwidth = $(window).width();
screenheight = $(window).height();
mytop = $(document).scrollTop();
getPosLeft = screenwidth / 2 - 200;
getPosTop = screenheight / 2 - 150;
$("#login").css({ "left": getPosLeft, "top": getPosTop + mytop });
});
//點(diǎn)擊關(guān)閉按鈕
$("#login_close").click(function() {
hideLogin();
});

$("#btnOK").click(function() {
$("#login").fadeOut("slow");
$("#browser").fadeIn("slow");
//刪除變灰的層
$("#greybackground").remove();
return false;
});
$.get("ashx/Handler.ashx?flag=islogin", function(data) {
if (data == "True") {//沒(méi)有登錄,顯示登錄框
hideLogin();
} else {
showLogin();
}
});
});

function showLogin() {//顯示登陸框
$("#login").fadeIn("slow");
//獲取頁(yè)面文檔的高度
var docheight = $(document).height();
//追加一個(gè)層,使背景變灰
$("body").append("div id='greybackground'>/div>");
$("#greybackground").css({ "opacity": "0.5", "height": docheight });
return false;
}
function hideLogin() {
$("#login").fadeOut("slow");
//刪除變灰的層
$("#greybackground").remove();
return false;
}
function alink() {//生成的a追加click事件
$("#poper .second a").each(function() {
$(this).click(function() {
var a = $(this).html();
$("#txtServer").val(a);
});
});
}
/script>

Handler.ashx

復(fù)制代碼 代碼如下:

%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.Collections.Generic;
using System.Text;
using System.Web.SessionState;

public class Handler : IHttpHandler,IRequiresSessionState {

public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string tempValue = string.Empty;
if (context.Request["flag"] == null)
context.Response.Write("error");
else
{
string flag = context.Request["flag"];
switch (flag)
{
case "server":
tempValue = this.GetServers();
break;
case "islogin":
tempValue = (context.Session["login"] != null).ToString();//判斷是否登錄到SQL
break;
case "login":
tempValue = IsLogin(context);
break;
default:
tempValue = "error";
break;
}
}
context.Response.Write(tempValue);
}

/// summary>
/// 加載SQL Server 服務(wù)列表
/// /summary>
/// returns>/returns>
private string GetServers()
{
IListstring> list = Common.GetServers();
if (list == null || list.Count == 0) return "empty";
StringBuilder sb = new StringBuilder();
foreach (string s in list)
{
sb.AppendFormat("div class=\"second\">a href=\"javascript:void(0);\" title=\"{0}\">{0}/a>/div>", s);
}
return sb.ToString();
}

/// summary>
/// 登錄SQL Server
/// /summary>
/// param name="context">/param>
/// returns>/returns>
private string IsLogin(HttpContext context)
{
if (context.Request["user"] == null || context.Request["password"] == null)
{
context.Session["login"] = "success";
return "";
}
else
{
string server = HttpUtility.UrlDecode(context.Request["sqlServer"]);
string user = HttpUtility.UrlDecode(context.Request["user"]);
string password = HttpUtility.UrlDecode(context.Request["password"]);
string sqlConstring;
if (Common.IsLogin(server, user, password, out sqlConstring))
{
context.Session["login"] = sqlConstring;
return "True";
}
else
{
return "False";
}
}
}

public bool IsReusable {
get {
return false;
}
}
}


Common.cs

復(fù)制代碼 代碼如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Sql;
using System.Data.SqlClient;
using System.Data;

/// summary>
/// Summary description for Common
/// /summary>
public class Common
{
public Common()
{
//
// TODO: Add constructor logic here
//
}

/// summary>
/// 加載SQL服務(wù)列表
/// /summary>
/// returns>/returns>
public static IListstring> GetServers()
{
IListstring> list = new Liststring>();
SqlDataSourceEnumerator sse = SqlClientFactory.Instance.CreateDataSourceEnumerator() as SqlDataSourceEnumerator;
if (sse == null) return null;
DataTable dt = sse.GetDataSources();
foreach (DataRow dr in dt.Rows)
{
string server = dr["ServerName"] as string;
string instance = dr["InstanceName"] as string;
if (string.IsNullOrEmpty(instance) || instance.ToUpper() == "MSSQLSERVER")
list.Add(server);
else
list.Add(server + @"\" + instance);
}
return list;
}

/// summary>
/// SQL Server Authentication
/// /summary>
/// param name="server">SQL服務(wù)/param>
/// param name="user">用戶名/param>
/// param name="password">密碼/param>
/// param name="sqlConstring">數(shù)據(jù)庫(kù)連接字符串/param>
/// returns>/returns>
public static bool IsLogin(string server,string user,string password,out string sqlConstring)
{
sqlConstring = string.Format("Data Source={0};Initial Catalog=master;Persist Security Info=True;User ID={1};Password={2}", server, user, password);
return SQLHelper.LoginSQL(sqlConstring);
}
}


SQLHelper.cs

復(fù)制代碼 代碼如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;

/// summary>
/// Summary description for SQLHelper
/// /summary>
public class SQLHelper
{
public SQLHelper()
{
//
// TODO: Add constructor logic here
//
}


/// summary>
/// 判斷是否登錄SQL Server
/// /summary>
/// param name="sqlConstring">/param>
/// returns>/returns>
public static bool LoginSQL(string sqlConstring)
{
bool isLogin = false;
using(SqlConnection conn = new SqlConnection(sqlConstring))
{
conn.Open();
if (conn.State.ToString().ToLower() == "open")
isLogin = true;
return isLogin;
}
}
}

源代碼下載:DataBase_jquery_div_jb51.rar

作者 cnblogs xu_happy_you

您可能感興趣的文章:
  • 一款經(jīng)典的ajax登錄頁(yè)面 后臺(tái)asp.net
  • Ajax異步方式實(shí)現(xiàn)登錄與驗(yàn)證
  • ajax 實(shí)現(xiàn)微信網(wǎng)頁(yè)授權(quán)登錄的方法
  • ajax實(shí)現(xiàn)登錄功能
  • Ajax實(shí)現(xiàn)帶有驗(yàn)證碼的局部刷新登錄界面
  • Ajax Session失效跳轉(zhuǎn)登錄頁(yè)面的方法
  • ajax編寫簡(jiǎn)單的登錄頁(yè)面
  • Ajax實(shí)現(xiàn)漂亮、安全的登錄界面
  • 登錄超時(shí)給出提示跳到登錄頁(yè)面(ajax、導(dǎo)入、導(dǎo)出)
  • Ajax實(shí)現(xiàn)登錄案例

標(biāo)簽:萍鄉(xiāng) 衡水 大理 棗莊 蚌埠 衢州 廣元 江蘇

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《div彈出層的ajax登錄(Jquery版+c#)》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266