JQuery返回Json的Ajax例子
前台HTML代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#BtnJson").click(function () {
//alert('testjson');
AjaxJsonTest();
}
);
}
);
function AjaxJsonTest() {
$.ajax({
type: 'post',
url: 'Ajax/JsonTest.ashx',
dataType: 'json',
success: function (data) {
var str = '<table border=1 style=" width:400px;">';
str += '<tr style="font-weight:bold"><td>name</td><td>age</td><td>sex</td></tr>';
for (var i = 0; i < data.length; i++) {
//alert('name:' + data[i].name + ' age:' + data[i].age + ' sex:' + data[i].sex);
//str += '<tr><td style="font-weight:bold">name</td><td>' + data[i].name + '</td><td style="font-weight:bold">age</td><td>' + data[i].age + '</td><td style="font-weight:bold">sex</td><td>' + data[i].sex + '</td></tr>';
str += '<tr>';
for (var key in data[i]) {
str += '<td>' + data[i][key] + '</td>';
}
str += '</tr>';
}
str += '</table>';
$("#divjson").html(str);
},
error: function () {
alert('系统繁忙，请稍候再试！');
}
}
); //end ajax
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divjson">
</div>
</form>
<p>
<input id="BtnJson" type="button" value="JsonTest" /></p>
</body>
</html>
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#BtnJson").click(function () {
//alert('testjson');
AjaxJsonTest();
}
);
}
);
function AjaxJsonTest() {
$.ajax({
type: 'post',
url: 'Ajax/JsonTest.ashx',
dataType: 'json',
success: function (data) {
var str = '<table border=1 style=" width:400px;">';
str += '<tr style="font-weight:bold"><td>name</td><td>age</td><td>sex</td></tr>';
for (var i = 0; i < data.length; i++) {
//alert('name:' + data[i].name + ' age:' + data[i].age + ' sex:' + data[i].sex);
//str += '<tr><td style="font-weight:bold">name</td><td>' + data[i].name + '</td><td style="font-weight:bold">age</td><td>' + data[i].age + '</td><td style="font-weight:bold">sex</td><td>' + data[i].sex + '</td></tr>';
str += '<tr>';
for (var key in data[i]) {
str += '<td>' + data[i][key] + '</td>';
}
str += '</tr>';
}
str += '</table>';
$("#divjson").html(str);
},
error: function () {
alert('系统繁忙，请稍候再试！');
}
}
); //end ajax
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divjson">
</div>
</form>
<p>
<input id="BtnJson" type="button" value="JsonTest" /></p>
</body>
</html>
后台的ASHX代码：
using System;
using System.Web;
using System.Text;
public class JsonTest : IHttpHandler {
public void ProcessRequest (HttpContext context) {
StringBuilder sb = new StringBuilder();
context.Response.ContentType = "text/plain";
sb.Append("[");
sb.Append("{\"name\":\"cycle\",\"age\":\"28\",\"sex\":\"男\"},");
sb.Append("{\"name\":\"ring\",\"age\":\"27\",\"sex\":\"男\"},");
sb.Append("{\"name\":\"jingjing\",\"age\":\"22\",\"sex\":\"女\"}");
sb.Append("]");
context .Response .Write (sb.ToString ());
context.Response.Flush();
context.Response.End();
}
public bool IsReusable {
get {
return false;
}
}
}
using System.Web;
using System.Text;
public class JsonTest : IHttpHandler {
public void ProcessRequest (HttpContext context) {
StringBuilder sb = new StringBuilder();
context.Response.ContentType = "text/plain";
sb.Append("[");
sb.Append("{\"name\":\"cycle\",\"age\":\"28\",\"sex\":\"男\"},");
sb.Append("{\"name\":\"ring\",\"age\":\"27\",\"sex\":\"男\"},");
sb.Append("{\"name\":\"jingjing\",\"age\":\"22\",\"sex\":\"女\"}");
sb.Append("]");
context .Response .Write (sb.ToString ());
context.Response.Flush();
context.Response.End();
}
public bool IsReusable {
get {
return false;
}
}
}
