《项目经验》--后台一般处理程序向前台JS文件传递JSON，JS解析JSON,将数据显示在界面--显示在DropDownList 或 显示在动态创建的table中

先看一下我要实现的功能界面：



这篇文章主要介绍：后台一般处理程序把从数据库查找的数据，转换成JSON，然后传递到前台JS文件中，JS解析JSON数据，并将数据显示在界面，主要介绍两种显示方式，显示在DropDownList控件 or 显示在动态创建的Table表中。

本文主要介绍两个地方：

1.根据学年查询学期信息的实现--JS将解析的JSON数据绑定到DropDownList框

2.显示教师信息的实现--JS将解析的JSON数据绑定到动态创建的table表中

一、首先介绍根据学年查询学期的实现过程--JS将解析的JSON数据绑定到DropDownList框

学年改变时，会引起学期的改变（这里即实现无刷新联动效果）；学年、学期都存储在DropDownList列表框中。

1.添加学年的Onchange事件

学期DropDownList框的HTML代码：

2.在授课JS文件中，编写学年OnChange事件中查找学期的方法（SelectSemesterBySchYear()）

注意：不要忘了在授课页面头部引入此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);
            }
        });

    }

 }

将查回的学期信息绑定到学期DropDownList框的方法

//解析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>"));
     }
 }

3.一般处理程序代码

一般处理程序调用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;
        }
    }

}

二、根据条件查询教师信息--[b]JS将解析的JSON数据绑定到动态创建的table表中[/b]

1.显示教师信息的HTML代码

<!--教师信息列表-->
                <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>

2.给查询教师的按钮，添加OnClick事件

3.在授课JS文件中，编写根据条件查询教师的方法

前台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);
            }
        });
    }  

}

4.一般处理程序，执行查询教师信息的方法，向JS传递JSON教师信息

<%@ 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数据后的两种显示方式就介绍完了！