[b]1、Model[/b][size=11px][/size]
[code=C#]
[Serializable]
public class Student
{
/// <summary>
/// 学生编号,唯一标识
/// </summary>
public int Id { get; set; }
/// <summary>
/// 学生姓名
/// </summary>
public string Name { get; set; }
/// <summary>
/// 学生性别
/// </summary>
public string Sex { get; set; }
/// <summary>
/// 联系地址
/// </summary>
public string Address { get; set; }
}
[/code]
[b]2、BLL[/b][size=16px][/size]
[code=C#]
public class StudentManager
{
public static List <Student> GetAllStudent()
{
//init
List <Student> studentList = new List <Student> ();
try
{
Student student = null;
for (int i = 1; i <= 3; i++)
{
if (i == 1)
{
student = new Student();
student.Id = i;
student.Name = "M ";
student.Sex = "男 ";
student.Address = "湖北襄阳 ";
}
if (i == 2)
{
student = new Student();
student.Id = i;
student.Name = "Y ";
student.Sex = "男 ";
student.Address = "湖北襄阳 ";
}
if (i == 3)
{
student = new Student();
student.Id = i;
student.Name = "F ";
student.Sex = "男 ";
student.Address = "湖北襄阳 ";
}
studentList.Add(student);
}
}
catch { }
return studentList;
}
}
[/code]
[b]3、WebService[/b][size=16px][/size]
[code=C#]
/// <summary>
/// GetAjaxData 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/ ")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class GetAjaxData : System.Web.Services.WebService
{
/// <summary>
/// 获取所有学生信息
/// </summary>
/// <returns> 学生信息集合 </returns>
[WebMethod]
public List <Student> GetAllStudent()
{
//调用业务逻辑层中的方法
return StudentManager.GetAllStudent(); ;
}
}
[/code]
[b]4、JS[/b][size=16px][/size]
[code=JScript]
<!--jquery包-->
<script src= "JS/jquery-1.4.2.min.js " type= "text/javascript "> </script>
<script type= "text/javascript " language= "javascript ">
$(document).ready(function() {
ajax(); //调用ajax方法
});
/// <summary>
/// Ajax调用webservice，解析C#对象
/// </summary>
function ajax() {
$.ajax({
type: "POST ",
contentType: "application/json ",
url: "WebService/GetAjaxData.asmx/GetAllStudent ",
dataType: "json ",
error: function() {
alert( "ajax请求错误 ");
},
success: function(data) {
$(data.d).each(function(i, object) {
var tr = $( " <tr/> ");
//添加学生编号
tr.append($( " <td align= 'center '/> ").text(object.Id));
//添加学生姓名
tr.append($( " <td align= 'center '/> ").text(object.Name));
//添加学生性别
tr.append($( " <td align= 'center '/> ").text(object.Sex));
//添加学生家庭地址
tr.append($( " <td align= 'center '/> ").text(object.Address));
//TR标记至TABLE标记下
$( "#table ").append(tr);
});
}
});
}
</script>
[/code]
[b]5、Html[/b][size=16px][/size]
[code=HTML]
<table id= "table " border= "1 " width= "400px; " cellpadding= "0 " cellspacing= "0 ">
<tr style= "font-weight: bold; color:Red; ">
<td align= "center ">
编号
</td>
<td align= "center ">
姓名
</td>
<td align= "center ">
性别
</td>
<td align= "center ">
家庭地址
</td>
</tr>
</table>
[/code]