登录页面，ajax,layer
2016-04-07 23:51
330 查看
demo.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
<title>仿百度登录界面</title>
<link href="CSS/demo.css" rel="stylesheet" />
<script src="JS/jquery-1.10.2.min.js"></script>
<script src="JS/jquery-1.10.2.intellisense.js"></script>
<script src="layer/layer.js"></script>
<script src="JS/demo.js"></script>
</head>
<body>
Hello World!
<div id="header">
<div id="header-con">
<div><a href="javascript:;" id="blogin" onclick="showLoginBox()">登录</a></div>
<div><a href="javascript:;" id="breg">注册</a></div>
</div>
</div>
<div id="loginbox">
<div class="login-item"><input type="text" id="txtUserName" placeholder="请输入用户名" /></div>
<div class="login-item"><input type="password" id="txtPwd" placeholder="请输入密码"/></div>
<div class="login-item"><a href="javascript:;" onclick="login()" >登录</a></div>
</div>
</body>
</html>
demo.css
*{
padding:0px;
margin:0px;
font-family:"微软雅黑";
}
#header{
width:100%;
height:40px;
background-color:#000;
}
#header-con{
width:100%;
height:40px;
border:solid 1px red;
margin:0px auto;
}
#header-con div{
float:right;
line-height:40px;
}
#header-con div a{
color:#00ff21;
}
.login-item input{
width:350px;
height:40px;
}
.login-item a{
background-color:#ff6a00;
width:350px;
height:50px;
display:block;
text-align:center;
line-height:50px;
color:#fff;
font-size:20px;
}
.login-item{
margin-top:25px;
margin-left:30px;
}
#loginbox{
display:none;
}
demo.js
/// <reference path="E:\Visual Studio 2013\Projects\Project20160406\Project20160406\layer/layer.js" />
/// <reference path="_references.js" />
function showLoginBox() {
layer.open({
type: 1,
title: "登录",
area: ["395px", "300px"],
content: $("#loginbox")
});
}
function login() {
var username = $.trim($("#txtUserName").val());//获取用户名
var pwd = $.trim($("#txtPwd").val());
if(username==""||pwd=="")
{
layer.alert("用户名不能为空或密码不能为空",
{
title:"提示",
icon:5
});
}
else
{
//C#
$.post("/control-background.ashx", {
"username": username, "pwd": pwd
}, function (data) {
if(data=="OK")
{
//layer.alert("登录成功", { title: "提示", icon: 6 });
//window.location.href="/jumpTo.html";
alert("OK");
window.location.href="/jumpTo.html";
}
else
{
layer.alert("用户名密码不正确",
{
title: "提示",
icon: 5
});
}
});
}
}
function text() {
}
demo.ashx.cs
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
namespace Project20160406
{
/// <summary>
/// Summary description for control_background
/// </summary>
public class control_background : IHttpHandler
{
private string conStr;
protected SqlConnection conn;
string con=ConfigurationManager.ConnectionStrings["con"].ToString();
public void ProcessRequest(HttpContext context)
{
//context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
conStr=con; // 从web 中得到连接地址
using(conn=new SqlConnection(conStr))
{
var username = context.Request.Form["username"];
var pwd = context.Request.Form["pwd"];
string strSql = string.Format("SELECT UserID FROM Table_1 WHERE UserName='{0}' and UserPwd='{1}'", username, pwd);
conn.Open();
SqlCommand cmd = new SqlCommand(strSql, conn);
SqlDataReader reader=cmd.ExecuteReader();
try
{
if (reader.HasRows)
{
context.Response.Write("OK");
}
else
{
context.Response.Write("NotOK");
}
}
catch(Exception e)
{
context.Response.Write("暂时无法登录");
}
finally
{
conn.Close();
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
web.config
<?xml version="1.0" encoding="utf-8"?>
<!--
For more information on how to configure your ASP.NET application, please visit
http://go.microsoft.com/fwlink/?LinkId=169433
-->
<configuration>
<connectionStrings>
<!--打开的是数据源，即服务器-->
<add name="con" connectionString="Data Source=PC-201502051038\SQLEXPRESS;Initial Catalog=20160407;Integrated Security=False;User ID=sa;Password=****;Connect Timeout=15;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False"/>
</connectionStrings>
<system.web>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
</system.web>
</configuration>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
<title>仿百度登录界面</title>
<link href="CSS/demo.css" rel="stylesheet" />
<script src="JS/jquery-1.10.2.min.js"></script>
<script src="JS/jquery-1.10.2.intellisense.js"></script>
<script src="layer/layer.js"></script>
<script src="JS/demo.js"></script>
</head>
<body>
Hello World!
<div id="header">
<div id="header-con">
<div><a href="javascript:;" id="blogin" onclick="showLoginBox()">登录</a></div>
<div><a href="javascript:;" id="breg">注册</a></div>
</div>
</div>
<div id="loginbox">
<div class="login-item"><input type="text" id="txtUserName" placeholder="请输入用户名" /></div>
<div class="login-item"><input type="password" id="txtPwd" placeholder="请输入密码"/></div>
<div class="login-item"><a href="javascript:;" onclick="login()" >登录</a></div>
</div>
</body>
</html>
demo.css
*{
padding:0px;
margin:0px;
font-family:"微软雅黑";
}
#header{
width:100%;
height:40px;
background-color:#000;
}
#header-con{
width:100%;
height:40px;
border:solid 1px red;
margin:0px auto;
}
#header-con div{
float:right;
line-height:40px;
}
#header-con div a{
color:#00ff21;
}
.login-item input{
width:350px;
height:40px;
}
.login-item a{
background-color:#ff6a00;
width:350px;
height:50px;
display:block;
text-align:center;
line-height:50px;
color:#fff;
font-size:20px;
}
.login-item{
margin-top:25px;
margin-left:30px;
}
#loginbox{
display:none;
}
demo.js
/// <reference path="E:\Visual Studio 2013\Projects\Project20160406\Project20160406\layer/layer.js" />
/// <reference path="_references.js" />
function showLoginBox() {
layer.open({
type: 1,
title: "登录",
area: ["395px", "300px"],
content: $("#loginbox")
});
}
function login() {
var username = $.trim($("#txtUserName").val());//获取用户名
var pwd = $.trim($("#txtPwd").val());
if(username==""||pwd=="")
{
layer.alert("用户名不能为空或密码不能为空",
{
title:"提示",
icon:5
});
}
else
{
//C#
$.post("/control-background.ashx", {
"username": username, "pwd": pwd
}, function (data) {
if(data=="OK")
{
//layer.alert("登录成功", { title: "提示", icon: 6 });
//window.location.href="/jumpTo.html";
alert("OK");
window.location.href="/jumpTo.html";
}
else
{
layer.alert("用户名密码不正确",
{
title: "提示",
icon: 5
});
}
});
}
}
function text() {
}
demo.ashx.cs
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
namespace Project20160406
{
/// <summary>
/// Summary description for control_background
/// </summary>
public class control_background : IHttpHandler
{
private string conStr;
protected SqlConnection conn;
string con=ConfigurationManager.ConnectionStrings["con"].ToString();
public void ProcessRequest(HttpContext context)
{
//context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
conStr=con; // 从web 中得到连接地址
using(conn=new SqlConnection(conStr))
{
var username = context.Request.Form["username"];
var pwd = context.Request.Form["pwd"];
string strSql = string.Format("SELECT UserID FROM Table_1 WHERE UserName='{0}' and UserPwd='{1}'", username, pwd);
conn.Open();
SqlCommand cmd = new SqlCommand(strSql, conn);
SqlDataReader reader=cmd.ExecuteReader();
try
{
if (reader.HasRows)
{
context.Response.Write("OK");
}
else
{
context.Response.Write("NotOK");
}
}
catch(Exception e)
{
context.Response.Write("暂时无法登录");
}
finally
{
conn.Close();
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
web.config
<?xml version="1.0" encoding="utf-8"?>
<!--
For more information on how to configure your ASP.NET application, please visit
http://go.microsoft.com/fwlink/?LinkId=169433
-->
<configuration>
<connectionStrings>
<!--打开的是数据源，即服务器-->
<add name="con" connectionString="Data Source=PC-201502051038\SQLEXPRESS;Initial Catalog=20160407;Integrated Security=False;User ID=sa;Password=****;Connect Timeout=15;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False"/>
</connectionStrings>
<system.web>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
</system.web>
</configuration>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- const void* 指向的内存是否可改变
- H3C汇聚层交换机认证在线人数展示系统之CheckList和燃尽图（16/04/06-16/04/13）
- elk之elasticsearch安装与配置
- [MySQL]Innodb参数优化
- The Perfect Stall
- android studio sexy editor性感编辑器设置
- leetcode---Rectangle Area
- Android 常见面试题 一
- 使用github page + hexo3.0 搭建个人博客，加绑定域名。
- B+树索引概述
- Hark语音识别学习（一）-Hark desinger的使用
- iOS开发之UISearchBar（自用贴）
- 天底下什么人都有，不要跟他们一般见识就是了
- Java学习第四天总结循环语句
- Android代码细节错误集合
- ocos2dx常见的46种动作+22种特效详解
- Maticsoft.DBUtility SQLlite的使用方式
- 解决jsp页面中始终报错无法引用WEB-INF下面js文件夹里的js文件
- Java基础 — JDBC
- MySQL语法格式总结