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

深碍√TFBOYSˉ_ 2022-04-10 12:37 139阅读 0赞

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

![1361449459_7489.jpg][]

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

**本文主要介绍两个地方：**

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

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

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

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

##     **1.添加学年的Onchange事件** ##

![1361449666_5843.gif][]

**学期DropDownList框的HTML代码：**

![1361451325_5144.gif][]

##   **  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;
            }
        }
    
    }

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

##     **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事件** ##

![1361450672_2663.gif][]

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

[1361449459_7489.jpg]: https://img-my.csdn.net/uploads/201302/21/1361449459_7489.jpg
[1361449666_5843.gif]: https://img-my.csdn.net/uploads/201302/21/1361449666_5843.gif
[1361451325_5144.gif]: https://img-my.csdn.net/uploads/201302/21/1361451325_5144.gif
[1361450672_2663.gif]: https://img-my.csdn.net/uploads/201302/21/1361450672_2663.gif