码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2015-09-15 21:50:04      阅读：375      评论：0      收藏：0      [点我收藏+]

标签：

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中。

       

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

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

 

 

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



 

    3.一般处理程序代码

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

    

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

 

 

 

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

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

      

[html] view plaincopyprint?
 
  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.                                                 
  43.                                                <input value=‘<%#Eval("TeacherID") %>‘ name="radTeacher" id="radTeacher" type="radio"  />  
  44.                                                 
  45.                                            </td>  
  46.                                            <td id="TeacherCode" class="txt c">  
  47.                                                00154  
  48.                                            </td>  
  49.                                            <td id="TeacherName" class="txt c">  
  50.                                                木子山  
  51.                                            </td>  
  52.                                            <td id="CollegeName" class="txt c">  
  53.                                                廊坊师范学院  
  54.                                            </td>  
  55.                                            <td id="TeacherTitle" class="txt c">  
  56.                                                讲师  
  57.                                            </td>  
  58.                                        </tr>  
  59.                                    </tbody>  
  60.                                </table>  
  61.                                 
  62.                            </div>  
  63.                        </div>  
  64.                    </div>  
  65.                </td>  

 

 

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

     技术分享

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

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

 

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

 

 

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

 

 

[csharp] view plaincopyprint?
 
  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.   
  27.   
  28. public class QueryTeacherInfo : IHttpHandler {  
  29.       
  30.     public void ProcessRequest (HttpContext context) {  
  31.         context.Response.ContentType = "text/plain";  
  32.         //context.Response.Write("Hello World");  
  33.         //教师所属学院实体  
  34.         CollegeEntity enCollegeTeacher = new CollegeEntity();  
  35.         //教师所属学院ID  
  36.         enCollegeTeacher.CollegeID = context.Request.QueryString["CollegeID"].ToString();  
  37.         //context.Response.Write(context.Request.QueryString["CollegeID"].ToString());  
  38.         //教师职称实体  
  39.         TitlesEntity enTeacherTitle = new TitlesEntity();  
  40.         //教师职称ID  
  41.         enTeacherTitle.TitleID = context.Request.QueryString["TitleID"].ToString();  
  42.   
  43.         //教师职务实体  
  44.         JobEntity enTeacherJob = new JobEntity();  
  45.         //教师职务ID  
  46.         enTeacherJob.JobID = context.Request.QueryString["JobID"].ToString();  
  47.   
  48.         //教师实体  
  49.         TeacherEntity enTeacher = new TeacherEntity();  
  50.         //教师姓名  
  51.         enTeacher.TeacherName = context.Server.UrlDecode(context.Request.QueryString["TeacherName"]);  
  52.   
  53.         //调用根据组合条件查询教师的方法  
  54.         DataTable dtTeacher = new TeachCourseBLL().QuerySimpleTeacherByGroup(enCollegeTeacher, enTeacherTitle, enTeacherJob, enTeacher);  
  55.   
  56.         //context.Response.Write(JsonConvert.SerializeObject(dtTeacher));  
  57.         //context.Response.End();  
  58.   
  59.         string strJson = DataTableToJson("TeacherJson", dtTeacher);  
  60.         context.Response.Write(strJson);  
  61.         context.Response.End();  
  62.           
  63.     }  
  64.     //将datatable数据转换成JSON数据  
  65.     public string DataTableToJson(string jsonName, DataTable dt)  
  66.     {  
  67.   
  68.         StringBuilder Json = new StringBuilder();  
  69.         Json.Append("[");  
  70.         if (dt.Rows.Count > 0)  
  71.         {  
  72.             for (int i = 0; i < dt.Rows.Count; i++)  
  73.             {  
  74.                 Json.Append("{");  
  75.                 for (int j = 0; j < dt.Columns.Count; j++)  
  76.                 {  
  77.                     Json.Append(dt.Columns[j].ColumnName.ToString() + ":\"" + dt.Rows[i][j].ToString() + "\"");  
  78.                     if (j < dt.Columns.Count - 1)  
  79.                     {  
  80.                         Json.Append(",");  
  81.                     }  
  82.                 }  
  83.                 Json.Append("}");  
  84.                 if (i < dt.Rows.Count - 1)  
  85.                 {  
  86.                     Json.Append(",");  
  87.                 }  
  88.             }  
  89.         }  
  90.         Json.Append("]");  
  91.         return Json.ToString();  
  92.     }  
  93.     public bool IsReusable {  
  94.         get {  
  95.             return false;  
  96.         }  
  97.     }  
  98.   
  99. }  



 

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

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

标签：

原文地址：http://www.cnblogs.com/zkwarrior/p/4811380.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！