logo

jQuery Ajax 调用后台方法返回 DataSet 或者 DataTable 的例子

作者:孟宪会 阅读:2000 发表于:2011-08-26 15:23:38

直接拷贝源代码粘贴成aspx文件即可运行看效果。

ASPX 代码
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

  
/// <summary>
  /// param1 param2 对应前面js传递来的参数。
  /// </summary>
  /// <param name="param1"></param>
  /// <param name="param2"></param>
  /// <returns></returns>
  [System.Web.Services.WebMethod]
  public static string GetDataTable(String param1, String param2)
  {
    
return DataTable2Json(CreateDataTable(param1, param2));
  }

  public static System.Data.DataTable CreateDataTable(String param1, String param2)
  {
    System.Data.DataTable dataTable1
= new System.Data.DataTable("BlogUser");
    System.Data.DataRow dr;
    dataTable1.Columns.Add(
new System.Data.DataColumn("UserId", typeof(System.Int32)));
    dataTable1.Columns.Add(
new System.Data.DataColumn("UserName", typeof(System.String)));
    dataTable1.PrimaryKey
= new System.Data.DataColumn[] { dataTable1.Columns["UserId"] };

    
for (int i = 0; i < 8; i++)
    {
      dr
= dataTable1.NewRow();
      dr[
0] = i;
      dr[
1] = "【孟子E章】" + i.ToString() + " 前端传递的参数的值分别是:" + param1 + ", " + param2;
      dataTable1.Rows.Add(dr);
    }
    
return dataTable1;
  }

  public static string DataTable2Json(System.Data.DataTable dt)
  {
    StringBuilder jsonBuilder
= new StringBuilder();
    jsonBuilder.Append(
"{\"");
    jsonBuilder.Append(dt.TableName.ToString());
    jsonBuilder.Append(
"\":[");
    
for (int i = 0; i < dt.Rows.Count; i++)
    {
      jsonBuilder.Append(
"{");
      
for (int j = 0; j < dt.Columns.Count; j++)
      {
        jsonBuilder.Append(
"\"");
        jsonBuilder.Append(dt.Columns[j].ColumnName);
        jsonBuilder.Append(
"\":\"");
        jsonBuilder.Append(dt.Rows[i][j].ToString());
        jsonBuilder.Append(
"\",");
      }
      jsonBuilder.Remove(jsonBuilder.Length
- 1, 1);
      jsonBuilder.Append(
"},");
    }
    jsonBuilder.Remove(jsonBuilder.Length
- 1, 1);
    jsonBuilder.Append(
"]");
    jsonBuilder.Append(
"}");
    
return jsonBuilder.ToString();
  }  
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  
<title>jQuery Ajax 调用后台方法返回 DataSet 或者 DataTable 的例子</title>
  
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
  
<form id="form1" runat="server">
  
<div id="result"></div>
  
</form>
  
<script type="text/javascript">
    $(document).ready(
function () {
      $.ajax({
        type:
"POST",
        url:
"<%=Request.Url.ToString() %>/GetDataTable",  /* 注意后面的名字对应CS的方法名称 */
        data:
"{\"param1\":\"8888\",\"param2\":\"参数2\"}", /* 注意参数的格式和名称 */
        contentType:
"application/json; charset=utf-8",
        dataType:
"json",
        success:
function (result) {
          data
= jQuery.parseJSON(result.d);  /*这里是否解析要看后台返回的数据格式,如果不返回表名则无需要 parseJSON */
          t
= "<table border='1'>";
          $.each(data.BlogUser,
function (i, item) { /* BlogUser是返回的表名 */
            t
+= "<tr>";
            t
+= "<td>" + item.UserId + "</td>";
            t
+= "<td>" + item.UserName + "</td>";
            t
+= "</tr>";
          })
          t
+= "</table>";
          $(
"#result").html(t);
        }
      });
    });      
  
</script>
</body>
</html>