這個(gè)例子是為了解答一個(gè)網(wǎng)友的問題而寫的。使用場(chǎng)景就是，希望在ashx中返回DataTable，然后在頁面中進(jìn)行異步調(diào)用和顯示。原先他的做法是想用json格式返回?cái)?shù)據(jù)。
因?yàn)镈ataTable可以直接序列化為XML格式，所以我比較推薦用XML返回。而不是再去解析為json之類的格式。
1. 創(chuàng)建ashx文件
using System;using System.Collections.Generic;using System.Web;using System.Web.Services;using System.Data;namespace WebApplication1{ /// <summary> /// $codebehindclassname$ 的摘要說明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class GetData : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/xml"; context.Response.Charset = "UTF-8"; DataTable dt = new DataTable("Employees"); dt.Columns.Add("ID"); dt.Columns.Add("Name"); for (int i = 0; i < 50; i++) { DataRow row = dt.NewRow(); row[0] = i; row[1] = "員工"+i.ToString(); dt.Rows.Add(row); } dt.WriteXml(context.Response.OutputStream); } public bool IsReusable { get { return false; } } }}
這個(gè)文件如果直接訪問的話，是類似下面這樣的返回結(jié)果
2.編寫頁面
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._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> <script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $.ajax({ url: "GetData.ashx", type: "POST", datatype: "xml", success: function(result) { var employees = $(result).find("Employees"); var index = 0; employees.each(function() { var id = $(this).find("ID").text(); var name = $(this).find("Name").text(); if (index++ % 2 == 0) { $("<div class='row' />").appendTo("#result").end().text(id); $("<div class='row' />").appendTo("#result").end().text(name); } else { $("<div class='row' />").appendTo("#result").end().css("background-color", "Silver").text(id); $("<div class='row' />").appendTo("#result").end().css("background-color", "Silver").text(name); } }); } }) }); </script> <style type="text/css"> .row { margin:2px; float:left; width:40%; border-style:solid; border-color:Silver; border-width:1px; } </style></head><body> <form id="form1" runat="server"> <div id="result"> <div class="row">員工編號(hào)</div> <div class="row">員工姓名</div> </div> </form></body></html>
3. 最后的效果如下
聯(lián)系客服
