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

http://blog.csdn.net/mazhaojuan/article/details/8599167

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

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

1. //根据学年ID查询相应学期信息
2. function SelectSemesterBySchYear() {
3. //获取学年下拉框的ID（value值）
4. //获取学年ID
5. var schoolyear = document.getElementById("ddlSchoolYear");
6. if ("" != schoolyear.options[schoolyear.selectedIndex].value) {
7. var getschyearvalue = schoolyear.options[schoolyear.selectedIndex].value; //得到ID
8. var getschyeartext = schoolyear.options[schoolyear.selectedIndex].text;  //得到显示值
9. //绑定学年下拉列表，使用json数据
10. $.ajax({
11. type: "get",
12. url: "../handler/QuerySemesterBySchoolYear.ashx?SchoolYear=" + escape(getschyearvalue) + "&t=" + new Date().getTime(),
13. success: function (strJson) {
14. //                alert(strJson);
15. //将json数据绑定到学期下拉列表
16. bindSemesterDDL(strJson);
17. },
18. error: function (XmlHttpRequest, textStatus, errorThrown) {
19. alert(XmlHttpRequest.responseText);
20. }
21. });
22. }
23. }

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

1. //解析json数据，绑定学期下拉列表
2. //将json数据绑定到DropDownList
3. function bindSemesterDDL(strJson) {
4. var dataArray = eval(strJson);
5. $("#ddlSemester").empty(); //清空学期下拉框信息
6. //依次遍历传回的json每条数据
7. for (var i = 0; i < dataArray.length; i++) {
8. //传递参数
9. $("#ddlSemester").append($("<option value='" + dataArray[i].Semester + "'>" + dataArray[i].Semester + "</option>"));
10. }
11. }

 3.一般处理程序代码

      一般处理程序调用BLL层方法，根据学年查询相应学期；并对查找回的DataTable做处理，向JS传递JSON学期信息

    

1. <%@ WebHandler Language="C#" Class="QuerySemesterBySchoolYear" %>
2. /*******************************************************************************
3. *文    件： QuerySemesterBySchoolYear.ashx
4. *作    者：mzj
5. *所属小组：评教小组
6. *文件说明：根据学年信息查询相应学期信息
7. *创建日期：2013年1月31日17:38:01
8. *修改作者：
9. *修改日期：
10. *修改描述：
11. *版 本 号：V1.0
12. *版本号变更记录：
13. ********************************************************************************/
14. using System;
15. using System.Web;
16. using System.Data;
17. using TeachSystem.BLL.TeachingBLL;
18. using TeachSystem.Entity.TeachingEntity;
19. using TeachSystem.Entity.CourseEntity;
20. using System.Text;
21. using System.Collections.Generic;
22. using System.Reflection;
23. public class QuerySemesterBySchoolYear : IHttpHandler {
24. public void ProcessRequest (HttpContext context) {
25. context.Response.ContentType = "text/plain";
26. //学年
27. string strSchoolYear = context.Server.UrlDecode(context.Request.QueryString["SchoolYear"]);
28. //校历实体
29. SchoolCalendarEntity enSchoolCalendar = new SchoolCalendarEntity();
30. enSchoolCalendar.SchoolYear = strSchoolYear;
31. //调用业务逻辑层方法，根据课程ID、学年、学期查询课程信息
32. //调用BLL层，根据学年查询相应学期信息
33. DataTable dtSemesterByYear = new CourseDistributionBLL().QuerySchoolCalenderByYear(enSchoolCalendar);
34. string strJson = DataTableToJson("SemesterJson", dtSemesterByYear);
35. context.Response.Write(strJson);
36. context.Response.End();
37. }
38. //将datatable数据转换成JSON数据的方法
39. public string DataTableToJson(string jsonName, DataTable dt)
40. {
41. StringBuilder Json = new StringBuilder();
42. Json.Append("[");
43. if (dt.Rows.Count > 0)
44. {
45. for (int i = 0; i < dt.Rows.Count; i++)
46. {
47. Json.Append("{");
48. for (int j = 0; j < dt.Columns.Count; j++)
49. {
50. Json.Append(dt.Columns[j].ColumnName.ToString() + ":\"" + dt.Rows[i][j].ToString() + "\"");
51. if (j < dt.Columns.Count - 1)
52. {
53. Json.Append(",");
54. }
55. }
56. Json.Append("}");
57. if (i < dt.Rows.Count - 1)
58. {
59. Json.Append(",");
60. }
61. }
62. }
63. Json.Append("]");
64. return Json.ToString();
65. }
66. public bool IsReusable {
67. get {
68. return false;
69. }
70. }
71. }

 

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

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

1. <!--教师信息列表-->
2. <td class="teacherlist">
3. <div class="block">
4. <div class="h">
5. <span class="icon-sprite icon-list"></span>
6. <h3>
7. 教师信息列表</h3>
8. </div>
9. <div class="tl corner">
10. </div>
11. <div class="tr corner">
12. </div>
13. <div class="bl corner">
14. </div>
15. <div class="br corner">
16. </div>
17. <div class="cnt-wp">
18. <div class="cnt" style="width: 400px; height: 300px; overflow: scroll;">
19. <table class="data-table history" id="mainTable" border="0" cellspacing="0" width="400px"
20. align="center" cellpadding="0">
21. <tbody>
22. <tr>
23. <th scope="col">
24. 选择
25. </th>
26. <th scope="col">
27. 教师代码
28. </th>
29. <th scope="col">
30. 教师姓名
31. </th>
32. <th scope="col">
33. 教师所属学院
34. </th>
35. <th scope="col">
36. 职称
37. </th>
38. </tr>
39. <%--添加一条模板列--%>
40. <tr id="content" class="contentDisplay">
41. <td id="select" class="chk">
42. <input value='<%#Eval("TeacherID") %>' name="radTeacher" id="radTeacher" type="radio"  />
43. </td>
44. <td id="TeacherCode" class="txt c">
45. 00154
46. </td>
47. <td id="TeacherName" class="txt c">
48. 木子山
49. </td>
50. <td id="CollegeName" class="txt c">
51. 廊坊师范学院
52. </td>
53. <td id="TeacherTitle" class="txt c">
54. 讲师
55. </td>
56. </tr>
57. </tbody>
58. </table>
59. </div>
60. </div>
61. </div>
62. </td>

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

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

前台JS文件会向一般处理程序传递查询教师的条件，一般处理查询调用BLL层的方法，查询出教师信息转换成JSON数据，然后传回JS，JS解析JSON，并将教师信息显示在动态添加的table表格中！

1. //*********************************************单击搜索教师按钮的js事件：查询教师信息并显示在table表格中**************************//
2. //从服务器端获取教师JSON数据，并显示到界面上
3. function SetData() {
4. var CollegeID = $('#ddlCollegeTeacher option:selected').val();    //教师所属学院ID
5. var TitleID = $('#ddlTeacherTitle option:selected').val();        //教师职称ID
6. var JobID = $('#ddlTeacherJob option:selected').val();            //教师职务ID
7. var TeacherName = $('#txtTeacherName').val();                     //教师姓名
8. //取得学年ID
9. var strSchoolYearID = document.getElementById("ddlSchoolYear");
10. //取得学期ID
11. var strSemesterID = document.getElementById("ddlSemester");
12. if ("" == strSchoolYearID.options[strSchoolYearID.selectedIndex].value) {
13. alert("请选择学年！");
14. } else if ("" == strSemesterID.options[strSemesterID.selectedIndex].value) {
15. alert("请选择学期！");
16. } else {
17. //学年学期都存在，查询教师
18. $.ajax({
19. type: "get", //传递类型get
20. //url一般处理程序路径及传递的参数：教师所属学院ID、教师职称ID、教师职务ID、教师姓名
21. url: "../handler/QueryTeacherInfo.ashx?CollegeID=" + CollegeID + "&TitleID=" + TitleID + "&JobID=" + JobID + "&TeacherName=" + escape(TeacherName) + "&t=" + new Date().getTime(),
22. //返回数据成功，将返回的json数据解析，显示在教师信息列表中
23. success: function (strJson) {
24. // alert(strJson);  //alert出从数据库查回的数据
25. var obj = eval(strJson);  //eval 计算 JavaScript 字符串，并把它作为脚本代码来执行
26. //检查后台返回的数据
27. //将获取到的数据动态的加载到table中
28. $("#mainTable tr").eq(1).removeClass("contentDisplay"); //移除模板行的样式
29. $("#mainTable tr").eq(1).nextAll().remove();        //将标题行的tr删除 这里指的是删除第二个tr
30. //依次遍历获得的json数据，向数据表table中动态加载数据
31. for (var i = 0; i < obj.length; i++) {
32. var row = $("#content").clone();  //clone clone() 方法生成被选元素的副本，包含子节点、文本和属性。
33. // 下面是闭包，立即执行函数，因未使用过暂不是用此方法 ：传递参数执行SelectTeacher方法
34. //row.find("#select input").click(function () { (function () { SelectTeacher(obj[i].TeacherId, obj[i].TeacherName); })(obj[i].TeacherId, obj[i].TeacherName); });
35. //单选按钮列。单击时，传递参数，调用SelectTeacher方法
36. row.find("#select input").bind("click", { ID: obj[i].TeacherID, Name: obj[i].TeacherName }, SelectTeacher);
37. row.find("#TeacherCode").text(obj[i].TeacherCode);  //教师代码
38. row.find("#TeacherName").text(obj[i].TeacherName);  //教师姓名
39. row.find("#CollegeName").text(obj[i].CollegeName);  //学院名称
40. row.find("#TeacherTitle").text(obj[i].TitleName);   //教师职称
41. //row.css("display", "inline");
42. row.appendTo("#mainTable");                         //添加到教师信息表中mainTable
43. }
44. $("#mainTable tr").eq(1).addClass("contentDisplay");   //添加模板列的css样式
45. },
46. //返回数据失败，弹出错误显示
47. error: function (XmlHttpRequest, textStatus, errorThrown) {
48. alert(XmlHttpRequest.responseText);
49. }
50. });
51. }
52. }

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

1. <%@ WebHandler Language="C#" Class="QueryTeacherInfo" %>
2. /*******************************************************************************
3. *文    件： QueryTeacherInfo.ashx
4. *作    者：mzj
5. *所属小组：评教小组
6. *文件说明：查询教师信息，用于授课页面
7. *创建日期：2013年2月2日9:01:07
8. *修改作者：
9. *修改日期：
10. *修改描述：
11. *版 本 号：V1.0
12. *版本号变更记录：
13. ********************************************************************************/
14. using System;
15. using System.Web;
16. using System.Data;
17. using TeachSystem.BLL.TeachingBLL;
18. using TeachSystem.Entity.TeachingEntity;
19. using TeachSystem.Entity.PersonnalEntity;
20. using TeachSystem.Entity.InstitutionEntity;
21. using System.Text;
22. using System.Collections.Generic;
23. using System.Reflection;
24. using Newtonsoft;
25. using Newtonsoft.Json;
26. public class QueryTeacherInfo : IHttpHandler {
27. public void ProcessRequest (HttpContext context) {
28. context.Response.ContentType = "text/plain";
29. //context.Response.Write("Hello World");
30. //教师所属学院实体
31. CollegeEntity enCollegeTeacher = new CollegeEntity();
32. //教师所属学院ID
33. enCollegeTeacher.CollegeID = context.Request.QueryString["CollegeID"].ToString();
34. //context.Response.Write(context.Request.QueryString["CollegeID"].ToString());
35. //教师职称实体
36. TitlesEntity enTeacherTitle = new TitlesEntity();
37. //教师职称ID
38. enTeacherTitle.TitleID = context.Request.QueryString["TitleID"].ToString();
39. //教师职务实体
40. JobEntity enTeacherJob = new JobEntity();
41. //教师职务ID
42. enTeacherJob.JobID = context.Request.QueryString["JobID"].ToString();
43. //教师实体
44. TeacherEntity enTeacher = new TeacherEntity();
45. //教师姓名
46. enTeacher.TeacherName = context.Server.UrlDecode(context.Request.QueryString["TeacherName"]);
47. //调用根据组合条件查询教师的方法
48. DataTable dtTeacher = new TeachCourseBLL().QuerySimpleTeacherByGroup(enCollegeTeacher, enTeacherTitle, enTeacherJob, enTeacher);
49. //context.Response.Write(JsonConvert.SerializeObject(dtTeacher));
50. //context.Response.End();
51. string strJson = DataTableToJson("TeacherJson", dtTeacher);
52. context.Response.Write(strJson);
53. context.Response.End();
54. }
55. //将datatable数据转换成JSON数据
56. public string DataTableToJson(string jsonName, DataTable dt)
57. {
58. StringBuilder Json = new StringBuilder();
59. Json.Append("[");
60. if (dt.Rows.Count > 0)
61. {
62. for (int i = 0; i < dt.Rows.Count; i++)
63. {
64. Json.Append("{");
65. for (int j = 0; j < dt.Columns.Count; j++)
66. {
67. Json.Append(dt.Columns[j].ColumnName.ToString() + ":\"" + dt.Rows[i][j].ToString() + "\"");
68. if (j < dt.Columns.Count - 1)
69. {
70. Json.Append(",");
71. }
72. }
73. Json.Append("}");
74. if (i < dt.Rows.Count - 1)
75. {
76. Json.Append(",");
77. }
78. }
79. }
80. Json.Append("]");
81. return Json.ToString();
82. }
83. public bool IsReusable {
84. get {
85. return false;
86. }
87. }
88. }

至此，解析JSON数据后的两种显示方式就介绍完了！