zoukankan      html  css  js  c++  java

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

           

    [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=" 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数据后的两种显示方式就介绍完了！
  • 相关阅读:
    逆向
    BUUCTF
    学校健康系统自动打卡
    SQL数据库操作练习（3）
    简单尝试UPX脱壳
    网站WAF-安全狗的绕过（一）
    【题解】担心
    【题解】树上的鼠
    【题解】CF1299B Aerodynamic
    【题解】等你哈苏德
  • 原文地址：https://www.cnblogs.com/zkwarrior/p/4811380.html
Copyright © 2011-2022 走看看