您的位置：首页 > Web前端 > JQuery

Jquery+Ajax+Json+ashx生成表

2015-11-10 09:17 621 查看

使用Jquery+Ajax+Json+ashx技术，获取后台数据，生成动态的表。

前台代码：使用了each获取后台json数据，是根据后台表的列名，前台列的ID为后台的列名。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqAjaxJson.aspx.cs" Inherits="JqAjaxJson" %>

<!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+ajax+ashx+json</title>
<script type="text/javascript" src="JS/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "get",
dataType: "Json",
url: "JAJson.ashx",
start: function () { alert("开始获取数据了"); },
complete: function () { alert("获取完成了"); },
success: function (data) {

var t = eval(data); //强制转换json字符串，生成json对象
$.each(t, function (i, n) {
var row = $("#trPerson").clone();
var v;
for (attribute in n) {
if (attribute == "Birthday") v = n[attribute].replace(" 0:00:00","");
else v = n[attribute];
row.find("#" + attribute).html(v); //循环json对象的属性，并赋值到数据行中的列，列的ID就是属性名称
}
row.appendTo($("#person"));
});
}
});
});
</script>
<style type="text/css">
.td{border:1px #00ced1 solid;}
</style>
</head>
<body>
<form id="form1" runat="server">
<table id="person" cellpadding="0" cellspacing="0">
<thead><tr><th class="td">编号</th><th class="td">姓名</th><th class="td">生日</th><th class="td">简历</th></tr></thead>
<tr id="trPerson">
<td id="ID" class="td"></td>
<td id="Name" class="td"></td>
<td id="Birthday" class="td"></td>
<td id="Experience" class="td"></td>
</tr>
</table>
</form>
</body>
</html>

后台ashx代码：

<%@ WebHandler Language="C#" Class="JAJson" %>

using System;
using System.Web;
using System.Data;
using System.Text;

public class JAJson : IHttpHandler {

public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
context.Response.Write(ToJson(NewTable()));
context.Response.End();
}

private DataTable NewTable()
{
DataTable personTable = new DataTable();
personTable.Columns.Add("ID", typeof(Int32));
personTable.Columns.Add("Name", typeof(String));
personTable.Columns.Add("Birthday", typeof(DateTime));
personTable.Columns.Add("Experience", typeof(String));

DataRow row1 = personTable.NewRow();
row1[0] = 1;
row1[1] = "龚辉";
row1[2] = DateTime.Parse("1989-3-20");
row1[3] = ".Net工程师，精通C#，熟练Jquery,CSS";
personTable.Rows.Add(row1);

DataRow row2 = personTable.NewRow();
row2[0] = 2;
row2[1] = "Albert";
row2[2] = DateTime.Parse("1993-5-03");
row2[3] = "Sales director,I have some large sales experience";
personTable.Rows.Add(row2);

DataRow row3 = personTable.NewRow();
row3[0] = 3;
row3[1] = "Bart";
row3[2] = DateTime.Parse("1963-5-03");
row3[3] = "Director,Production:\"The scorpion king\",\"Speed 7\"";
personTable.Rows.Add(row3);

return personTable;
}

public static string ToJson(DataTable dt)
{
StringBuilder json = new StringBuilder();
json.Append("[");
DataRowCollection drc = dt.Rows;
for (int i = 0; i < drc.Count; i++)
{
json.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
string key = dt.Columns[j].ColumnName;
string value = drc[i][j].ToString();
Type type = dt.Columns[j].DataType;
json.Append("\"" + key + "\":");
value = StringFormat(value, type);
json.Append(value);
if (j < dt.Columns.Count - 1)
{
json.Append(",");
}
}
json.Append("},");
}
json.Remove(json.Length - 1, 1);
json.Append("]");
return json.ToString();
}

private static string StringFormat(string str, Type type)
{
if (type == typeof(string))
{
str = StringJson(str);
str = "\"" + str + "\"";
}
else if (type == typeof(DateTime))
{
str = "\"" + str + "\"";
}
else if (type == typeof(bool))
{
str = str.ToLower();
}
else if (type != typeof(string) && string.IsNullOrEmpty(str))
{
str = "\"" + str + "\"";
}
return str;
}

private static string StringJson(String s)
{
StringBuilder sb = new StringBuilder();
for (int i = 0; i < s.Length; i++)
{
char c = s.ToCharArray()[i];
switch (c)
{
case '\"':
sb.Append("\\\""); break;
case '\\':
sb.Append("\\\\"); break;
case '/':
sb.Append("\\/"); break;
case '\b':
sb.Append("\\b"); break;
case '\f':
sb.Append("\\f"); break;
case '\n':
sb.Append("\\n"); break;
case '\r':
sb.Append("\\r"); break;
case '\t':
sb.Append("\\t"); break;
default:
sb.Append(c); break;
}
}
return sb.ToString();
}

public bool IsReusable {
get {
return false;
}
}
}

运行结果效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航