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

2022-10-29 08:00:13

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

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

《项目经验》--后台一般处理程序向前台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事件

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

学期DropDownList框的HTML代码：

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

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

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

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

上一篇：Java中使用org.json和json-lib解析JSON


下一篇：Android更改文字选中后左侧水滴及文字背景色