欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

div弹出层的ajax登录(Jquery版+c#)

程序员文章站 2024-03-06 19:24:26
页面初始化，界面如图所示： server name文本框获取焦点时候，界面如图所示（这里可以改成你登录的验证码）： 可以加载sql server服务列表，也是我...

页面初始化，界面如图所示：

div弹出层的ajax登录(Jquery版+c#)

server name文本框获取焦点时候，界面如图所示（这里可以改成你登录的验证码）：

div弹出层的ajax登录(Jquery版+c#)

可以加载sql server服务列表，也是我的简易sql查询分析器评论中静夜妙思给予的方法，非常感谢！

加载列表如下图所示：

div弹出层的ajax登录(Jquery版+c#)

div弹出层的ajax登录(Jquery版+c#)

可以随意地点击添加到server name中，登录时截图所示：

div弹出层的ajax登录(Jquery版+c#)

文本框验证都写好了！还有authentication验证方式，windows验证下面login,password文本框禁掉！由于时间原因，不上图了

demo.html(全部前台代码，js/css还没分文件存储)

复制代码 代码如下:

<!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>  </div>
<div class="first"><a id="loadserver" href="javascript:void(0);" title="点击加载sql server服务列表">点击加载sql server服务列表</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='正在加载中，请稍后……' />正在加载中，请稍后……") },
success: function(data) {
if (data == "error") {
$("#poper .first").html("<font color=red>服务列表加载失败，请刷新重新加载</font>");
} else if (data == "empty") {
$("#poper .first").html("<font color=red>没有数据，请手动填写</font>");
} else {
$("#poper .first").remove();
$("#poper").append(data);
alink();
}
},
error: function() { $("#poper .first").html("<font color=red>系统发生错误，请联系管理员！</font>"); }
});
});
})


$("#btnconnect").click(function() {
if ($("#selectauthentication").val() == "sql") { //sql server authentication
if ($("#txtserver").val().length < 1) {
$("#message").css("color", "red"); $("#message").html("请输入server name");
} else if ($("#txtusername").val().length < 1) {
$("#message").css("color", "red"); $("#message").html("请输入login");
} else if ($("#txtpassword").val().length < 1) {
$("#message").css("color", "red"); $("#message").html("请输入password");
} else {
$.ajax({
type: "get",
datatype: "text",
timeout: 300000,
url: "ashx/handler.ashx",
data: "flag=login&sqlserver=" + 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='正在加载中，请稍后……' />正在验证，请稍后……"); },
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();
//获取滚动条距顶部的偏移
mytop = $(document).scrolltop();
//计算弹出层的left
getposleft = screenwidth / 2 - 200;
//计算弹出层的top
getpostop = screenheight / 2 - 150;
//css定位弹出层
$("#login").css({ "left": getposleft, "top": getpostop });
//当浏览器窗口大小改变时
$(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 });
});
//当拉动滚动条时，弹出层跟着移动
$(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 });
});
//点击关闭按钮
$("#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") {//没有登录，显示登录框
hidelogin();
} else {
showlogin();
}
});
});

function showlogin() {//显示登陆框
$("#login").fadein("slow");
//获取页面文档的高度
var docheight = $(document).height();
//追加一个层，使背景变灰
$("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

复制代码 代码如下:

<%@ 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 服务列表
/// </summary>
/// <returns></returns>
private string getservers()
{
ilist<string> 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

复制代码 代码如下:

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服务列表
/// </summary>
/// <returns></returns>
public static ilist<string> getservers()
{
ilist<string> list = new list<string>();
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服务</param>
/// <param name="user">用户名</param>
/// <param name="password">密码</param>
/// <param name="sqlconstring">数据库连接字符串</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

复制代码 代码如下:

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

上一篇： Java 并发 博客分类： java concurrent

下一篇： ASP.NET设计网络硬盘之两重要类代码

推荐阅读