Asp.net Jquery Ajax 运用实例
1.利用ashx文件实现调用后台数据。
（.ashx 文件用于写web handler的。其实就是带HTML和C#的混合文件，使用.ashx 可以让你专注于编程而不用管相关的WEB技术。）
jQuery.getJSON( url, [data], [callback] )
html
Code<%@ 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>Jquery 获取数据</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function GetData()
{
//清空数据
$("#list").html("");
$.getJSON(
"Handler.ashx",
//传参数
{name:"ike",age:20},
function(json)
{
$.each(json,function(i){
$("#list").append("<li>name:"+json[i].name+" Age:"+json[i].age+"</li>")
});
}
);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="btnGetData" type="button" value="获取数据" onclick="GetData()" />
</div>
<ul id="list"></ul>
</form>
</body>
</html>
ashx
Code<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
public class Handler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
//传送过来的参数name的值
string queryName = context.Request.QueryString.GetValues("name")[0];
//传送过来的参数Age的值
string queryAge = context.Request.QueryString.GetValues("age")[0];
//构建的json数据
string jsonData = "[{name:\"ike_li\",age:24},{name:\"lili\",age:23}]";
context.Response.Write(jsonData);
}
public bool IsReusable {
get {
return false;
}
}
}
如果不是Json数据格式，就要用到序列化了
序列化（Serialize）是将对象状态转换为可保持或传输的格式的过程。与序列化相对的是反序列化(Deserialize)，它将流转换为对象。这两个过程结合起来，就使得数据能够被轻松地存储和传输。
http://james.newtonking.com/pages/json-net.aspx下载控件
引用Newtonsoft.Json.dll
using Newtonsoft.Json;
ashx
Code<%@ WebHandler Language="C#" Class="Handler2" %>
using System;
using System.Web;
using Newtonsoft.Json;
public class Handler2 : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
Product product = new Product();
product.Name = "Apple";
product.Expiry = new DateTime(2008, 12, 28);
product.Price = 3.99M;
product.Sizes = new string[] { "Small", "Medium", "Large" };
string output = JsonConvert.SerializeObject(product);
//{
// "Name": "Apple",
// "Expiry": "\/Date(1230375600000+1300)\/",
// "Price": 3.99,
// "Sizes": [
// "Small",
// "Medium",
// "Large"
// ]
//}
//反序列化
Product deserializedProduct = JsonConvert.DeserializeObject<Product>(output);
context.Response.Write(output);
}
public bool IsReusable {
get {
return false;
}
}
}
Code<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>Jquery 获取数据</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function GetData()
{
//清空数据
$("#list").html("");
$.getJSON(
"Handler2.ashx",
//传参数
// {name:"ike",age:20},
function(json)
{
$("#list").append("<li>"+json.Name+","+json.Expiry+","+json.Price+","+json.Sizes[0]+"</li>");
}
);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="btnGetData" type="button" value="获取数据" onclick="GetData()" />
</div>
<ul id="list"></ul>
</form>
</body>
</html>
Codeusing System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
/// <summary>
/// Summary description for Product
/// </summary>
public class Product
{
public Product()
{
//
// TODO: Add constructor logic here
//
}
private string _Name;
public string Name
{
get { return _Name; }
set { _Name = value; }
}
private DateTime _Expiry;
public DateTime Expiry
{
get { return _Expiry; }
set { _Expiry = value; }
}
private decimal _Price;
public decimal Price
{
get { return _Price; }
set { _Price = value; }
}
private string[] _Sizes;
public string[] Sizes
{
get { return _Sizes; }
set { _Sizes = value; }
}
}
实例2
Code<%@ 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>Untitled Page</title>
<script src="JS/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="JS/JScript.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>User:<input id="txtUser" type="text" /></div>
<div>Password:<input id="txtPwd" type="text" /></div>
<div><input id="btnConfirm" type="button" value="Confirm" /></div>
<div><input id="btnClear" type="button" value="Clear" /></div>
<div id="msg"></div>
</div>
</form>
</body>
</html>
Code$(document).ready(function(){
$("#btnClear").click(function(){
$("#txtUser").val("");
$("#txtPwd").val("");
});
$("#btnConfirm").click(function(){
if($("#txtUser").val()=="")
{
alert("user");
return;
}
if($("#txtPwd").val()=="")
{
alert("pwd");
return;
}
//jQuery.get(url,[data],[callback])
$.ajax({
type:"GET",
// type:"POST",
url:"CheckUser.ashx",
data:{user:$("#txtUser").val(),pwd:$("#txtPwd").val()},
beforeSend:function(){$("#msg").html("logining
..");}, success:function(data){
if(data.substring(0,1)=="N")
{
$("#msg").html("fail
..");}
else
{
$("#msg").html("ok
..");}
}
});
});
});
Code<%@ WebHandler Language="C#" Class="CheckUser" %>
using System;
using System.Web;
public class CheckUser : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
//get
//string user = context.Request.QueryString["user"];
//string pwd = context.Request.QueryString["pwd"];
////post
//string user = context.Request.Form["user"];
//string pwd = context.Request.Form["pwd"];
string user = context.Request["user"];
string pwd = context.Request["pwd"];
if (user == "ike" && pwd == "123")
{
context.Response.Write("Y");
}
else
{
context.Response.Write("N");
}
}
public bool IsReusable {
get {
return false;
}
}
}
浙公网安备 33010602011771号