ASP.NET基于JQUERY的AJAX的验证登录（JSON）
近来想做个JQUERY的AJAX的登录验证，登录不是问题，但是JQUERY的数据验证格式是JSON格式，这下有点难道我了，
因为我以前没学过JSON，于是上百度和google上搜索关于这方面的案例，但是搜到都是PHP的，.NET的少之又少（几乎没有益一个完整的DEMO），由于现在PHP开源框架非常多，而且他们的内部已经封装好了对JSON数据的转化，所以开发人员根本不必关心它内部是怎么转化的，所以对于PHP来说这个JQUERY验证就容易的所了。
其实.NET内部有对数据转化的类库，
比如using System.Runtime.Serialization.Json
可以调用这里面的方法岁数据JSON序列还的操作，但是我研究半天就输不出JSON格式的数据，于是干脆自己写个。
下面是自己写的DEMO，
注意看我的编写目录。
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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" >
<head runat="server">
<title>主页</title>
<link type="text/css" href="css/thickbox.css" rel=Stylesheet />
<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="js/thickbox.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div style="margin-left:auto; margin-right:auto;width:400px;">
<a href="ajaxLogin.html?height=120&width=250&modal=false" class="thickbox" title="请登录">
我要进行JQUERY登录验证</a>
<br />
账号：admin<br/>
密码：admin
</div>
</form>
</body>
</html>
ajaxLogin.html
<!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" >
<head>
<title>登录</title>
<!--调用JQUERY内部函数-->
<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<!--调用登录函数-->
<script src="js/login.js" type="text/javascript"></script>
</head>
<body>
<form method="post" action="login.aspx" id="login_form" name="login_form">
<div style="text-align:center ">
<table border="0" cellpadding="3" cellspacing="3" style="margin:0 auto;" >
<tr>
<td><label> Username</label>
:</td>
<td><input name="login_id" id="login_id" type="text" size="20"></td>
</tr>
<tr>
<td><label> Password</label>
:</td>
<td><input name="login_pwd" id="login_pwd" type="password" size="20"></td>
</tr>
<tr align="right">
<td colspan="2">
<input type="button" id="LoginBtn" value="login" > <input type="button" id="Submit1" value="Cancel" onclick="tb_remove()"></td>
</tr>
</table>
<div id="confirm"></div>
</div>
</form>
</body>
</html>
login.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="login.aspx.cs" Inherits="login" %>
<!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" >
<head runat="server">
<title>登录验证</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
login.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//执行登录验证的方法
checklogin();
}
public void checklogin()
{
//获得登录页面POST过来的参数
string username = Request.Params["id"].ToString();
string userpwd= Request.Params["pwd"].ToString();
//准备实例化已经构造好的类
JsonClass jc;
if (username == "admin" && userpwd == "admin")
{
//如果登录成功则构造这样序列化好的JSON格式的数据
jc = new JsonClass("login success", "", 1);
}
else
{
//否则是这样的
jc = new JsonClass("login faile", "", 0);
}
//输出带有JSON格式的数据
Response.Write(jc);
//发送JSON格式的数据到客户端并终止该页的执行
//注意这个方法必须有否则JSON输出到客户端在ajax判断会不正确
Response.End();
}
}
login.js
// JScript 文件
$(document).ready(function(){
//获取登录按的事件并激活click事件
$('#LoginBtn').click(function(){
login();
});
});
function login()
{
var login_id=$("#login_id").val();
var login_pwd=$("#login_pwd").val();
if (login_id =="")
{
$("#confirm").html("请输入登录ID");
$("#login_id").focus();
return false;
}
if(login_pwd =="")
{
$("#confirm").html("请输入登录密码");
$("#login_pwd").focus();
return false;
}
$.ajax({
type: "POST",//URL方式为POST
url: "login.aspx",//这里是指向登录验证的页面
data:'id='+login_id+'&pwd='+login_pwd,//把要验证的参数传过去
dataType:'json',//数据类型为JSON格式的验证
//在发送数据之前要运行的函数
beforeSend:function(){
$("#confirm").html("登录中.........");
},
success:function(data)
{
//这是个重点，根据验证页面（login.aspx）输出的JSON格式数据判断是否登录成功
//sta就是那个输出到客户端的标示
if(data.sta==1)
{
$("#confirm").html("登录成功！");location.href='loginOK.htm';
}
else
{
alert('密码都没输入正确还想进？哼！');
}
}
});
}
JsonClass.cs
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
/// <summary>
/// JsonClass 的摘要说明
/// </summary>
public class JsonClass
{
//手动输出JSON格式的数据
//微软的的那个自带的对数据JSON序列化的东西太麻烦了
//毛主席说过：自己动手丰衣足食
public JsonClass(string info,string data,int sta)
{
//
// TODO: 在此处添加构造函数逻辑
//
this.info = info;
this.data = data;
this.sta = sta;
}
string info;
string data;
int sta;
public string Info
{
get { return info; }
set { this.info = value; }
}
public string Data
{
get { return data; }
set { this.data = value; }
}
public int Sta
{
get { return sta; }
set { this.sta = value; }
}
//重写ToString()方法，以便输出格式是标准的JSON格式
//具体Json是什么样的格式大家个在网上查查
public override string ToString()
{
return "{\"data\":\"" + data + "\",\"info\":\"" + info + "\",\"sta\":" + sta + "}";
}
}
jquery-1.2.6.js文件和thickbox.js大家可以到网上下载
文章出处：DIY部落(http://www.diybl.com/course/1_web/javascript/jsjs/2008918/143293.html)
浙公网安备 33010602011771号