HTML：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>学习</title> 6 <link href="layer/layer.css" rel="stylesheet" /> 7 <link href="css/demo.css" rel="stylesheet" /> 8 <script src="js/jquery-2.0.0.min.js"></script> 9 <script src="layer/layer.js"></script> 10 <script src="js/demo.js"></script> 11 </head> 12 <body> 13 <div id="header"> 14 <div id="header-con"> 15 <div><a href="javascript:;" id="blogin" onclick="ShowLoginBox();">登录</a></div> 16 <div><a href="javascript:;" id="breg" onclick="ShowRegBox();">注册</a></div> 17 </div> 18 </div> 19 20 <div id="loginBox"> 21 <div class="login-item"><input type="text" id="txtUserName" placeholder="请输入用户名" /></div> 22 <div class="login-item"><input type="password" id="txtPwd" placeholder="请输入密码" /></div> 23 <div class="login-item"><a href="javascript:;" onclick="Login();">登录</a></div> 24 </div> 25 26 <div id="regbox"> 27 <div class="login-item"><input type="text" id="txtRegUserName" placeholder="请输入用户名" /></div> 28 <div class="login-item"><input type="password" id="txtRegPwd" placeholder="请输入密码" /></div> 29 <div class="login-item"><input type="text" id="txtRegQQ" placeholder="请输入QQ号" /></div> 30 <div class="login-item"><input type="text" id="txtRegEmail" placeholder="请输入邮箱" /></div> 31 <div class="login-item"><input type="text" id="txtRegTel" placeholder="请输入手机" /></div> 32 <div class="login-item"><a href="javascript:;" onclick="Reg();">注册</a></div> 33 </div> 34 35 <div id="dimgbox"> 36 <div></div> 37 </div> 38 </body> 39 </html>
CSS：
1 *{ 2 padding:0px; 3 margin:0px; 4 font-family:"微软雅黑"； 5 } 6 #header{ 7 width:100%; 8 height:40px; 9 background-color:#000; 10 } 11 #header-con{ 12 width:900px; 13 height:40px; 14 border:solid 1px; 15 margin:0 auto; 16 } 17 #header-con div{ 18 float:right; 19 line-height:40px; 20 margin-left:10px; 21 } 22 a{ 23 text-decoration:none; 24 } 25 #header-con div a{ 26 color:#fff; 27 } 28 .login-item input{ 29 width:350px; 30 height:40px; 31 } 32 .login-item a{ 33 display:block; 34 width:354px; 35 height:50px; 36 background-color:#5fd2dd; 37 text-align:center; 38 line-height:50px; 39 color:#fff; 40 font-size:30px; 41 } 42 43 .login-item{ 44 margin-top:25px; 45 margin-left:20px; 46 } 47 48 #loginBox,#regbox{ 49 display:none; 50 }
JS：
function Login() { var username = $("#txtUserName").val(); var pwd = $.md5($.trim($("#txtPwd").val())); if (username == "" || pwd == "") { layer.alert("用户名密码不能为空！", {title:"提示",icon:5}); } else { $.post("/demo.ashx", { "username": username, "pwd": pwd ,"cmd":"login"}, function (data) { if(data=="登录成功") { layer.alert("登录成功", { title: "提示", icon:6 }); } else { //layer.msg layer.alert("用户名或者密码错误", { title: "提示", icon: 5 }); } }); } }
C#
string username = context.Request.Form["username"]; string pwd = context.Request.Form["pwd"]; string strSql = string.Format("select * from Login where username='{0}' and pwd='{1}'", username, pwd); if (SqlHelper.Exists(strSql)) { context.Response.Write("登录成功"); } else { context.Response.Write("登录失败"); }
连接字符串：
<connectionStrings> <add name="con" connectionString="Database=MyStudy;Server=192.168.163.107;Integrated Security=false;Uid=sa;Password=1234;" providerName="System.Data.SqlClient"/> </connectionStrings>
需要引入SqlHelper；layer；jquery