后端将查询到的数据返回给前端
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
DataTable table = SqlHelper.ExecuteQuery("select * from t_users");
List<string> list = new List<string>();
foreach (DataRow row in table.Rows)
{
list.Add(row["userId"] + "," + row["userName"] + "," + row["password"]);
}
string str = string.Join("|", list);
context.Response.Write(str);
}
前端将返回的数据添加到表格中
<script src="../jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "post", url: "/JSONData/List.ashx",
success: function (data) {
var users = data.split("|");
for (var i = 0; i < users.length; i++) {
var user = users[i];
var u = user.split(",");
var id = u[0];
var name = u[1];
var pass = u[2];
$("#bgbody").append($("<tr><td>" + id + "</td><td>" + name + "</td><td>" + pass + "</td></tr>"));
}
}, error: function () {
alert("请求数据出错");
}
}
);
});
</script>
</head>
<body>
<table width="200">
<thead>
<tr><th>ID</th><th>用户名</th><th>密码</th></tr>
</thead>
<tbody id="bgbody" >
</tbody>
</table>
</body>