登录页面，ajax,layer

最新推荐文章于 2022-12-29 10:47:50 发布

Bill11YAng

最新推荐文章于 2022-12-29 10:47:50 发布

阅读量5.3k

点赞数 1

分类专栏： C#

本文链接：https://blog.csdn.net/softuse/article/details/51090683

版权

C# 专栏收录该内容

111 篇文章 0 订阅

订阅专栏

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" οnclick="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:;" οnclick="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"?>

<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>