所谓的ajax.这里我们讲二种方法
方法一:(微软有自带ajax框架)
在asp.net里微软有自己的ajax框架.就是在页面后台.cs文件里引入 using system.web.services 空间 然后定义静态方法(方法前加上 [webmethod])
[webmethod]
public static string abc(string abc)
{
return abc;
}
好了,现在我们谈谈前台js怎么处理后台返回的数据吧,可利用jquery处理返回的纯html,json,xml等数据.这里我们演示返回返回的数据有string、集合(lista8093152e673feb7aba1828c43532094)、类.
但都返回json格式(json轻量级比xml处理起来简单).看看前台是怎么解析这些数据的.
代码如下:
前台页面:
<%@ 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>无标题页</title>
<style type="text/css">
.hover
{
cursor: pointer; /*小手*/
background: #ffc; /*背景*/
}
</style>
<script type="text/javascript" src="js/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript">
//无参数调用
$(document).ready(function() {
$('#btn1').click(function() {
$.ajax({
type: "post", //访问webservice使用post方式请求
contenttype: "application/json",
url: "default2.aspx/helloworld", //调用webservice的地址和方法名称组合 ---- wsurl/方法名
data: "{}", //这里是要传递的参数，格式为 data: "{paraname:paravalue}",下面将会看到
datatype: 'json', //webservice 会返回json类型
success: function(result) { //回调函数，result，返回值
alert(result.d);
}
});
});
});
//有参数调用
$(document).ready(function() {
$("#btn2").click(function() {
$.ajax({
type: "post",
contenttype: "application/json",
url: "default2.aspx/getwish",
data: "{value1:'心想事成',value2:'万事如意',value3:'牛牛牛',value4:2009}",
datatype: 'json',
success: function(result) {
alert(result.d);
}
});
});
});
//返回集合（引用自网络，很说明问题）
$(document).ready(function() {
$("#btn3").click(function() {
$.ajax({
type: "post",
contenttype: "application/json",
url: "default2.aspx/getarray",
data: "{i:10}",
datatype: 'json',
success: function(result) {
$(result.d).each(function() {
alert(this);
$('#dictionary').append(this.tostring() + " ");
//alert(result.d.join(" | "));
});
}
});
});
});
//返回复合类型
$(document).ready(function() {
$('#btn4').click(function() {
$.ajax({
type: "post",
contenttype: "application/json",
url: "default2.aspx/getclass",
data: "{}",
datatype: 'json',
success: function(result) {
$(result.d).each(function() {
//alert(this);
$('#dictionary').append(this['id'] + " " + this['value']);
//alert(result.d.join(" | "));
});
}
});
});
});
//ajax 为用户提供反馈，他们两个方法可以添加给jquery对象在ajax前后回调
//但对与ajax的监控，本身是全局性的
$(document).ready(function() {
$('#loading').ajaxstart(function() {
$(this).show();
}).ajaxstop(function() {
$(this).hide();
});
});
// 鼠标移入移出效果，多个元素的时候，可以使用“，”隔开
$(document).ready(function() {
$('btn').hover(function() {
$(this).addclass('hover');
}, function() {
$(this).removeclass('hover');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="btn1" value="helloworld"/>
<input type="button" id="btn2" value="传入参数"/>
<input type="button" id="btn3" value="返回集合"/>
<input type="button" id="btn4" value=" 返回复合类型"/>
</div>
<div id="dictionary">dictionary
</div>
</form>
</body>
</html>
后台.cs文件
using system;
using system.collections;
using system.collections.generic;
using system.configuration;
using system.data;
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.web.services;
public partial class default2 : system.web.ui.page
{
protected void page_load(object sender, eventargs e)
{
}
[webmethod]
public static string helloworld()
{
return "123--->456";
}
[webmethod]
public static string abc(string abc)
{
return abc;
}
[webmethod]
public static string getwish(string value1, string value2, string value3, int value4)
{
return string.format("祝您在{3}年里 {0}、{1}、{2}", value1, value2, value3, value4);
}
/// <summary>
/// 返回集合
/// </summary>
/// <param name="i"></param>
/// <returns></returns>
[webmethod]
public static list<int> getarray(int i)
{
list<int> list = new list<int>();
while (i >= 0)
{
list.add(i--);
}
return list;
}
/// <summary>
/// 返回一个复合类型
/// </summary>
/// <returns></returns>
[webmethod]
public static class1 getclass()
{
return new class1 { id = "1", value = "牛年大吉" };
}
public class class1
{
public string id { get; set; }
public string value { get; set; }
}
}
利用jquery让返回的各类数据(string、集合(list<>)、类)以json数据格式返回,为什么要用到result.d
这里我们顺带讲下json
json简单讲就是javascript对象或数组.
json形式一: javascript对象 { "firstname": "brett", "lastname":"mclaughlin", "email": "aaaa" }
json形式二: javascript数组 [{ "firstname": "brett", "lastname":"mclaughlin", "email": "aaaa" },
{ "firstname": "jason", "lastname":"hunterwang", "email": "bbbb"}]
当然javascript 数组和对象可以互相嵌套.如形式一中的"brett"可以换成一个js数组或js对象.那微软的ajax返回的是哪种形式呢.是第一种.
微软框架默认返回一个 { "d": "后台返回的数据" } 这里我们用以上示例中的测试到得比如
如上例的返回的是string类型的话firefox调试如下
当返回的是list<>类型的话firefox调试如下
返回的数据也是放在js对象中的d属性里面 所以说这就是为什么我们老是用result.d来取微软的框架返回的数据.
方法一不常用.一般用得多的还是方法二.
方法二:(建一个一般处理程序即.ashx文件)
用这种方法一般是我们要在ashx文件里手动写好返回的json格式的数据返回给前台用
ashx 你可以配成json格式一或json格式二
default.aspx页面js代码如下
$.ajax({
type: "post",
url: "handler.ashx",
datatype: "json",
success: function(data){
alert(data.name); //返回的为 json格式一(js对象)
/* 返回的为 json格式二(js对象)
$(data).each(function(i) {
alert(data[i].name);
});
*/
}
});
handler.ashx 代码如下
<%@ webhandler language="c#" class="handler" %>
using system;
using system.web;
using system.collections;
using system.collections.generic;
using system.web.script.serialization;
public class handler : ihttphandler {
public void processrequest (httpcontext context) {
javascriptserializer jss = new javascriptserializer();
context.response.contenttype = "text/plain";
// 返回的为json格式一 js对象
string data = "{\"name\":\"wang\",\"age\":25}";
// 返回的为json格式二 js数组
//string data = "[{\"name\":\"wang\",\"age\":25},{\"name\":\"zhang\",\"age\":22}]";
context.response.write(data);
}
public bool isreusable {
get {
return false;
}
}
}
以上基本上就第二种方法,可能有人不喜欢拼字符串.那有什么好办法呢?答案是有.微软对json有很好的支持.
拿上例子说我们只要把handler.ashx改一下就可以了
handler.ashx 代码如下
<%@ webhandler language="c#" class="handler" %>
using system;
using system.web;
using system.collections;
using system.collections.generic; // dictionary<,> 键值对集合所需
using system.web.script.serialization; //javascriptserializer 类所需
public class handler : ihttphandler {
public void processrequest (httpcontext context) {
javascriptserializer jss = new javascriptserializer();
context.response.contenttype = "text/plain";
dictionary<string, string> drow = new dictionary<string, string>();
drow.add("name", "wang");
drow.add("age", "24");
context.response.write(jss.serialize(drow));
}
public bool isreusable {
get {
return false;
}
}
}
asp.net中的javascriptserializer为我们提供了很好的方法
jss.serialize(drow) 是把drow的dictionary<string, int> (键和值的集合)数据类型转换成json数据格式
调试结果如下图 (上面例子是输出了一个键值多集合即一个json形式一的js对象)
如果要输出json形式二(js数组)呢? 我们也只要改动一部分就了
handler.ashx 代码如下
<%@ webhandler language="c#" class="handler" %>
using system;
using system.web;
using system.collections;
using system.collections.generic;
using system.web.script.serialization;
public class handler : ihttphandler {
public void processrequest (httpcontext context) {
javascriptserializer jss = new javascriptserializer();
context.response.contenttype = "text/plain";
list<dictionary<string, string>> _list = new list<dictionary<string, string>>();
dictionary<string, string> drow = new dictionary<string, string>();
drow.add("name", "wang");
drow.add("age", "24");
dictionary<string, string> drow1 = new dictionary<string, string>();
drow1.add("name", "zhang");
drow1.add("age", "35");
_list.add(drow);
_list.add(drow1);
context.response.write(jss.serialize(_list));
}
public bool isreusable {
get {
return false;
}
}
}
调试结果如下图 (上面例子是输出了json形式二的js数组)
讲到这里基本概念也讲得差不多了. 这里再讲一个够常碰到的例子就是如何把datatabel转换成json格式从而好让前台页面调用.
就是在handler.ashx写上一个方法
/// <summary>
/// datatable转json
/// </summary>
/// <param name="dtb"></param>
/// <returns></returns>
private string dtb2json(datatable dtb)
{
javascriptserializer jss = new javascriptserializer();
arraylist dic = new arraylist();
foreach (datarow row in dtb.rows)
{
dictionary<string, object> drow = new dictionary<string, object>();
foreach (datacolumn col in dtb.columns)
{
drow.add(col.columnname, row[col.columnname]);
}
dic.add(drow);
}
return jss.serialize(dic);
}
其实也有把json格式转换成datatabel格式,方法如下
/// <summary>
/// json转datatable
/// </summary>
/// <param name="json"></param>
/// <returns></returns>
private datatable json2dtb(string json)
{
javascriptserializer jss = new javascriptserializer();
arraylist dic = jss.deserialize<arraylist>(json);
datatable dtb = new datatable();
if (dic.count > 0)
{
foreach (dictionary<string, object> drow in dic)
{
if (dtb.columns.count == 0)
{
foreach (string key in drow.keys)
{
dtb.columns.add(key, drow[key].gettype());
}
}
datarow row = dtb.newrow();
foreach (string key in drow.keys)
{
row[key] = drow[key];
}
dtb.rows.add(row);
}
}
return dtb;
}
我们让返回的json以表格的形式显示出来
那么前台页面js如下
$.ajax({
type: "post",
url: "handler.ashx",
datatype: "json",
success: function(data){
var table = $("<table border='1'></table>");
for (var i = 0; i < data.length; i++) {
o1 = data[i];
var row = $("<tr></tr>");
for (key in o1)
{
var td = $("<td></td>");
td.text(o1[key].tostring());
td.appendto(row);}
row.appendto(table);
}
table.appendto($("#back"));
}
});
由上例子 再讲两个js知识点
1. 之前我们取json里面的数据如果是返回的是数组的话是用data[i].name也可表示为data[i]["name"]
2. 如果要访问js对象的所有属性那么遍历js对象.
success: function(data){
$(data).each(function(i) {
for(key in this) // 遍历js对象的所有属性
alert(data[i][key]);
//这里就不能换成 data[i].key 否则key成了属性而不是上面的key变量
});
}
也有把前台json数据传到后台后解析成datatabel
更多详谈 jquery ajax异步处理json数据.。