最近的项目开始要用到JQuery了，但是我JQuery用的好少，做了一个简单的通过Ajax和后台交换数据的demo,预先练习下。
主要是用AJAX调用后台的方法 url: "Default.aspx/GetJosnData", 即页面/方法，方法必须加上[WebMethod]，然后返回Josn，然后前台解析。
[WebMethod]
命名空间 System.Web.Services;
向使用 ASP.NET 创建的 XML Web services 中的某个方法添加此特性后，就可以从远程 Web 客户端调用该方法。
前台的
<%@ 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"> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <title></title> <script type="text/javascript" language="javascript"> function showData() { $.ajax({ type: "post", url: "Default.aspx/GetJosnData", datatype: "json", contentType: "application/json; charset=utf-8", success: function (data) { var obj = (eval('(' + data.d + ')')[0]).JosnData; //循环Josn $.each(obj, function (i, item) { //i 序号,item对应的对象 $("#tab1").append("<tr><td> " + i + "</td><td>" + item.ID + " </td><td>" + item.Name + " </td></tr>"); }); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); } }); } </script> </head> <body> <form id="form1" runat="server"> <div> <table id="tab1"> <tr> <td> 编号 </td> <td> ID </td> <td> Name </td> </tr> </table> <input id="Button1" type="button" value="查询" onclick="showData()" /> </div> </form> </body> </html>
然后是后台的
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.Services; using System.Data; using System.Text; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } [WebMethod] public static string GetJosnData() { string Josn = ""; //先随便构造一个Table DataTable dt = new DataTable(); dt.Columns.Add("ID"); dt.Columns.Add("Name"); for (int i = 0; i < 3; i++) { DataRow dr = dt.NewRow(); dr["ID"] = "编号" + i.ToString(); dr["Name"] = "值" + i.ToString(); dt.Rows.Add(dr); } //将DataTable转换成Josn Josn = DataTableToJson("JosnData", dt); return Josn; } /// <summary> /// 将DataTble转为Josn数据 /// </summary> /// <param name="jsonName">Josn名</param> /// <param name="dt">需要转换的DataTble</param> /// <returns></returns> public static string DataTableToJson(string jsonName, DataTable dt) { StringBuilder Json = new StringBuilder(); Json.Append("[{"" + jsonName + "":["); if (dt.Rows.Count > 0) { for (int i = 0; i < dt.Rows.Count; i++) { Json.Append("{"); for (int j = 0; j < dt.Columns.Count; j++) { Json.Append(""" + dt.Columns[j].ColumnName.ToString() + "":"" + dt.Rows[i][j].ToString() + """); if (j < dt.Columns.Count - 1) { Json.Append(","); } } Json.Append("}"); if (i < dt.Rows.Count - 1) { Json.Append(","); } } } Json.Append("]}]"); return Json.ToString(); } }