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

/article/1978137.html

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



这篇文章主要介绍：后台一般处理程序把从数据库查找的数据，转换成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中。

[javascript] view plaincopyprint?

//根据学年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框的方法

[javascript] view plaincopyprint?

//解析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学期信息

[csharp] view plaincopyprint?

<%@ 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代码

[html] view plaincopyprint?

<!--教师信息列表-->

<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表格中！

[javascript] view plaincopyprint?

//*********************************************单击搜索教师按钮的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教师信息

[csharp] view plaincopyprint?

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