先看一下我要实现的功能界面：
这篇文章主要介绍：后台一般处理程序把从数据库查找的数据，转换成JSON，然后传递到前台JS文件中，JS解析JSON数据，并将数据显示在界面，主要介绍两种显示方式，显示在DropDownList控件 or 显示在动态创建的Table表中。
本文主要介绍两个地方：
1.根据学年查询学期信息的实现--JS将解析的JSON数据绑定到DropDownList框
2.显示教师信息的实现--JS将解析的JSON数据绑定到动态创建的table表中
学年改变时，会引起学期的改变（这里即实现无刷新联动效果）；学年、学期都存储在DropDownList列表框中。
学期DropDownList框的HTML代码：
注意：不要忘了在授课页面头部引入此JS文件哦！
通过此JS文件，向一般处理程序传递学年，并对传回的JSON学期信息解析，显示在学期DropDownList中。
//根据学年ID查询相应学期信息
function SelectSemesterBySchYear() {
//获取学年下拉框的ID（value值）
//获取学年ID
var schoolyear = document.getElementById("ddlSchoolYear");
if ("" != schoolyear.options[schoolyear.selectedIndex].value) {
var getschyearvalue = schoolyear.options[schoolyear.selectedIndex].value; //得到ID
var getschyeartext = schoolyear.options[schoolyear.selectedIndex].text; //得到显示值
//绑定学年下拉列表，使用json数据
$.ajax({
type: "get",
url: "../handler/QuerySemesterBySchoolYear.ashx?SchoolYear=" + escape(getschyearvalue) + "&t=" + new Date().getTime(),
success: function (strJson) {
// alert(strJson);
//将json数据绑定到学期下拉列表
bindSemesterDDL(strJson);
},
error: function (XmlHttpRequest, textStatus, errorThrown) {
alert(XmlHttpRequest.responseText);
}
});
}
}
//解析json数据，绑定学期下拉列表
//将json数据绑定到DropDownList
function bindSemesterDDL(strJson) {
var dataArray = eval(strJson);
$("#ddlSemester").empty(); //清空学期下拉框信息
//依次遍历传回的json每条数据
for (var i = 0; i < dataArray.length; i++) {
//传递参数
$("#ddlSemester").append($("<option value='" + dataArray[i].Semester + "'>" + dataArray[i].Semester + "</option>"));
}
}一般处理程序调用BLL层方法，根据学年查询相应学期；并对查找回的DataTable做处理，向JS传递JSON学期信息
<%@ WebHandler Language="C#" Class="QuerySemesterBySchoolYear" %>
/*******************************************************************************
*文 件： QuerySemesterBySchoolYear.ashx
*作 者：mzj
*所属小组：评教小组
*文件说明：根据学年信息查询相应学期信息
*创建日期：2013年1月31日17:38:01
*修改作者：
*修改日期：
*修改描述：
*版 本 号：V1.0
*版本号变更记录：
********************************************************************************/
using System;
using System.Web;
using System.Data;
using TeachSystem.BLL.TeachingBLL;
using TeachSystem.Entity.TeachingEntity;
using TeachSystem.Entity.CourseEntity;
using System.Text;
using System.Collections.Generic;
using System.Reflection;
public class QuerySemesterBySchoolYear : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
//学年
string strSchoolYear = context.Server.UrlDecode(context.Request.QueryString["SchoolYear"]);
//校历实体
SchoolCalendarEntity enSchoolCalendar = new SchoolCalendarEntity();
enSchoolCalendar.SchoolYear = strSchoolYear;
//调用业务逻辑层方法，根据课程ID、学年、学期查询课程信息
//调用BLL层，根据学年查询相应学期信息
DataTable dtSemesterByYear = new CourseDistributionBLL().QuerySchoolCalenderByYear(enSchoolCalendar);
string strJson = DataTableToJson("SemesterJson", dtSemesterByYear);
context.Response.Write(strJson);
context.Response.End();
}
//将datatable数据转换成JSON数据的方法
public string DataTableToJson(string jsonName, DataTable dt)
{
StringBuilder Json = new StringBuilder();
Json.Append("[");
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
Json.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
Json.Append(dt.Columns[j].ColumnName.ToString() + ":\"" + dt.Rows[i][j].ToString() + "\"");
if (j < dt.Columns.Count - 1)
{
Json.Append(",");
}
}
Json.Append("}");
if (i < dt.Rows.Count - 1)
{
Json.Append(",");
}
}
}
Json.Append("]");
return Json.ToString();
}
public bool IsReusable {
get {
return false;
}
}
}
<!--教师信息列表-->
<td class="teacherlist">
<div class="block">
<div class="h">
<span class="icon-sprite icon-list"></span>
<h3>
教师信息列表</h3>
</div>
<div class="tl corner">
</div>
<div class="tr corner">
</div>
<div class="bl corner">
</div>
<div class="br corner">
</div>
<div class="cnt-wp">
<div class="cnt" style="width: 400px; height: 300px; overflow: scroll;">
<table class="data-table history" id="mainTable" border="0" cellspacing="0" width="400px"
align="center" cellpadding="0">
<tbody>
<tr>
<th scope="col">
选择
</th>
<th scope="col">
教师代码
</th>
<th scope="col">
教师姓名
</th>
<th scope="col">
教师所属学院
</th>
<th scope="col">
职称
</th>
</tr>
<%--添加一条模板列--%>
<tr id="content" class="contentDisplay">
<td id="select" class="chk">
<input value='<%#Eval("TeacherID") %>' name="radTeacher" id="radTeacher" type="radio" />
</td>
<td id="TeacherCode" class="txt c">
00154
</td>
<td id="TeacherName" class="txt c">
木子山
</td>
<td id="CollegeName" class="txt c">
廊坊师范学院
</td>
<td id="TeacherTitle" class="txt c">
讲师
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</td> 
前台JS文件会向一般处理程序传递查询教师的条件，一般处理查询调用BLL层的方法，查询出教师信息转换成JSON数据，然后传回JS，JS解析JSON，并将教师信息显示在动态添加的table表格中！
//*********************************************单击搜索教师按钮的js事件：查询教师信息并显示在table表格中**************************//
//从服务器端获取教师JSON数据，并显示到界面上
function SetData() {
var CollegeID = $('#ddlCollegeTeacher option:selected').val(); //教师所属学院ID
var TitleID = $('#ddlTeacherTitle option:selected').val(); //教师职称ID
var JobID = $('#ddlTeacherJob option:selected').val(); //教师职务ID
var TeacherName = $('#txtTeacherName').val(); //教师姓名
//取得学年ID
var strSchoolYearID = document.getElementById("ddlSchoolYear");
//取得学期ID
var strSemesterID = document.getElementById("ddlSemester");
if ("" == strSchoolYearID.options[strSchoolYearID.selectedIndex].value) {
alert("请选择学年！");
} else if ("" == strSemesterID.options[strSemesterID.selectedIndex].value) {
alert("请选择学期！");
} else {
//学年学期都存在，查询教师
$.ajax({
type: "get", //传递类型get
//url一般处理程序路径及传递的参数：教师所属学院ID、教师职称ID、教师职务ID、教师姓名
url: "../handler/QueryTeacherInfo.ashx?CollegeID=" + CollegeID + "&TitleID=" + TitleID + "&JobID=" + JobID + "&TeacherName=" + escape(TeacherName) + "&t=" + new Date().getTime(),
//返回数据成功，将返回的json数据解析，显示在教师信息列表中
success: function (strJson) {
// alert(strJson); //alert出从数据库查回的数据
var obj = eval(strJson); //eval 计算 JavaScript 字符串，并把它作为脚本代码来执行
//检查后台返回的数据
//将获取到的数据动态的加载到table中
$("#mainTable tr").eq(1).removeClass("contentDisplay"); //移除模板行的样式
$("#mainTable tr").eq(1).nextAll().remove(); //将标题行的tr删除 这里指的是删除第二个tr
//依次遍历获得的json数据，向数据表table中动态加载数据
for (var i = 0; i < obj.length; i++) {
var row = $("#content").clone(); //clone clone() 方法生成被选元素的副本，包含子节点、文本和属性。
// 下面是闭包，立即执行函数，因未使用过暂不是用此方法 ：传递参数执行SelectTeacher方法
//row.find("#select input").click(function () { (function () { SelectTeacher(obj[i].TeacherId, obj[i].TeacherName); })(obj[i].TeacherId, obj[i].TeacherName); });
//单选按钮列。单击时，传递参数，调用SelectTeacher方法
row.find("#select input").bind("click", { ID: obj[i].TeacherID, Name: obj[i].TeacherName }, SelectTeacher);
row.find("#TeacherCode").text(obj[i].TeacherCode); //教师代码
row.find("#TeacherName").text(obj[i].TeacherName); //教师姓名
row.find("#CollegeName").text(obj[i].CollegeName); //学院名称
row.find("#TeacherTitle").text(obj[i].TitleName); //教师职称
//row.css("display", "inline");
row.appendTo("#mainTable"); //添加到教师信息表中mainTable
}
$("#mainTable tr").eq(1).addClass("contentDisplay"); //添加模板列的css样式
},
//返回数据失败，弹出错误显示
error: function (XmlHttpRequest, textStatus, errorThrown) {
alert(XmlHttpRequest.responseText);
}
});
}
}
<%@ WebHandler Language="C#" Class="QueryTeacherInfo" %>
/*******************************************************************************
*文 件： QueryTeacherInfo.ashx
*作 者：mzj
*所属小组：评教小组
*文件说明：查询教师信息，用于授课页面
*创建日期：2013年2月2日9:01:07
*修改作者：
*修改日期：
*修改描述：
*版 本 号：V1.0
*版本号变更记录：
********************************************************************************/
using System;
using System.Web;
using System.Data;
using TeachSystem.BLL.TeachingBLL;
using TeachSystem.Entity.TeachingEntity;
using TeachSystem.Entity.PersonnalEntity;
using TeachSystem.Entity.InstitutionEntity;
using System.Text;
using System.Collections.Generic;
using System.Reflection;
using Newtonsoft;
using Newtonsoft.Json;
public class QueryTeacherInfo : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
//教师所属学院实体
CollegeEntity enCollegeTeacher = new CollegeEntity();
//教师所属学院ID
enCollegeTeacher.CollegeID = context.Request.QueryString["CollegeID"].ToString();
//context.Response.Write(context.Request.QueryString["CollegeID"].ToString());
//教师职称实体
TitlesEntity enTeacherTitle = new TitlesEntity();
//教师职称ID
enTeacherTitle.TitleID = context.Request.QueryString["TitleID"].ToString();
//教师职务实体
JobEntity enTeacherJob = new JobEntity();
//教师职务ID
enTeacherJob.JobID = context.Request.QueryString["JobID"].ToString();
//教师实体
TeacherEntity enTeacher = new TeacherEntity();
//教师姓名
enTeacher.TeacherName = context.Server.UrlDecode(context.Request.QueryString["TeacherName"]);
//调用根据组合条件查询教师的方法
DataTable dtTeacher = new TeachCourseBLL().QuerySimpleTeacherByGroup(enCollegeTeacher, enTeacherTitle, enTeacherJob, enTeacher);
//context.Response.Write(JsonConvert.SerializeObject(dtTeacher));
//context.Response.End();
string strJson = DataTableToJson("TeacherJson", dtTeacher);
context.Response.Write(strJson);
context.Response.End();
}
//将datatable数据转换成JSON数据
public string DataTableToJson(string jsonName, DataTable dt)
{
StringBuilder Json = new StringBuilder();
Json.Append("[");
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
Json.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
Json.Append(dt.Columns[j].ColumnName.ToString() + ":\"" + dt.Rows[i][j].ToString() + "\"");
if (j < dt.Columns.Count - 1)
{
Json.Append(",");
}
}
Json.Append("}");
if (i < dt.Rows.Count - 1)
{
Json.Append(",");
}
}
}
Json.Append("]");
return Json.ToString();
}
public bool IsReusable {
get {
return false;
}
}
}至此，解析JSON数据后的两种显示方式就介绍完了！