关闭

解析JSON数据后的两种显示方式

4076人阅读 评论(0) 收藏 举报
分类:

通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中

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


    这个界面的功能在图中已有展现,课程分配(教师教授哪门课程)在之前的页面中已做好。这个页面主要实现的是授课,即给老师教授的课程分配学生。此页面实现功能的步骤已在页面中有所体现,这里不再赘述,此篇文章主要介绍:我是如何通过js从前台获取数据,然后通过ajax技术向后台一般处理程序传递JSON,后台又是如何获取传来的JSON,并对JSON数据转换,然后将转换后的数据写入数据库的!


    介绍这些步骤实现前,先说说自己的辛酸:絮叨辛酸,是因为为了实现这个功能,我真的用了很长时间!为了让用户看着舒服点,这个页面的实现我写了700多行的JS代码和9个一般处理程序!为了避免页面刷新影响效果,又不想使用VS自带的UpdatePanel AJAX控件,感觉这个控件会带来不少后患,所以这个页面的实现我使用了大量JS代码。从后台一般处理程序向前台传递JSON,前台解析JSON并显示在界面,这样的实现网上例子很多,非常容易实现,我也写了一篇博客来记录自己的成长,见《《项目经验》--后台一般处理程序向前台JS文件传递JSON,JS解析JSON,将数据显示在界面--显示在DropDownList 或 显示在动态创建的table中》;而从前台向后台传递JSON用法,却让我费尽周折,最终也没找到一个完整的实例,但最后将问题分成几个步骤,然后一步步解决了!

    

   下面分享下我的经验,希望对用到此功能的战友有所帮助,当然我这样实现有什么缺陷,还希望得到高人指点!


1.界面层添加信息列表部分html代码

[html] view plain copy
 print?
  1. <!--添加各项列表-->  
  2.                <td class="addlist">  
  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: 450px; height: 400px; overflow: scroll;">  
  19.                                <table class="data-form" id="tabAddList" border="0" cellspacing="0" width="450px"  
  20.                                    align="center" cellpadding="0">  
  21.                                       <tbody>  
  22.                             
  23.                            <tr>  
  24.                                <th scope="row">  
  25.                                    教师名:  
  26.                                </th>  
  27.                                <td>  
  28.                                    <asp:TextBox CssClass="input-normal" ID="txtAddTeacherName" runat="server"   
  29.                                        Enabled="False"></asp:TextBox>  
  30.                                    <%--隐藏控件,保存教师id--%>  
  31.                                    <asp:HiddenField ID="hidFieldSaveTeacherID" runat="server" />  
  32.                                </td>  
  33.                            </tr>  
  34.                             <tr>  
  35.                                <th scope="row">  
  36.                                    课程名:  
  37.                                </th>  
  38.                                <td>  
  39.                                    <asp:TextBox CssClass="input-normal" ID="txtAddCourseName" runat="server"   
  40.                                        Enabled="False"></asp:TextBox>  
  41.                                    <%--隐藏控件,保存课程id--%>  
  42.                                    <asp:HiddenField ID="hidFieldSaveCourseID" runat="server" />  
  43.                                    <%--隐藏控件,保存教师、课程关系indexing--%>  
  44.                                    <asp:HiddenField ID="hidFieldSaveIndexing" runat="server" />  
  45.                                </td>  
  46.                            </tr>  
  47.                            <tr>  
  48.                                <th scope="row">  
  49.                                    选择上课班:  
  50.                                </th>  
  51.                                <td>  
  52.                                    <asp:DropDownList ID="ddlTeachClass" CssClass="input-normal" runat="server">  
  53.                                    </asp:DropDownList>  
  54.                                </td>  
  55.                                 <td>  
  56.                                   <%-- <asp:Button ID="btnAddTeachClass" runat="server" Text="添加一个上课班" OnClick="btnAddTeachClass_Click" />--%>  
  57.                                       
  58.                                      <input id="btnAddTeachClass" type="button" class="btn-lit" value="确认添加" onclick="AddTeachClass()" />  
  59.                                </td>  
  60.                            </tr>  
  61.                            <tr>  
  62.                                <th scope="row">  
  63.                                    已选授课人数  
  64.                                </th>  
  65.                                <td>  
  66.                                    <asp:TextBox CssClass="input-normal" ID="txtStuNum" runat="server"   
  67.                                        Enabled="False"></asp:TextBox>  
  68.                                </td>  
  69.                            </tr>  
  70.                            <tr>  
  71.                                <th scope="row">  
  72.                                    学生姓名列表  
  73.                                </th>  
  74.                                <td>  
  75.                                    <asp:ListBox ID="lsboxStudent" runat="server" Height="150px" Width="250px"></asp:ListBox>  
  76.                                </td>  
  77.                            </tr>  
  78.                             
  79.                            <tr>  
  80.                                <th scope="row">  
  81.                                     <br />  
  82.                                </th>  
  83.                                <td>  
  84.                                    <br />  
  85.                                     <%--<asp:Button ID="btnAddTeachCourse" class="btn-lit" runat="server" Text="确认添加"   
  86.                                        onclick="btnAddTeachCourse_Click" />--%>  
  87.                                    <input id="btnAddTeachCourse" type="button" class="btn-lit" value="确认添加" onclick="AddTeachCourse()" />  
  88.                                </td>  
  89.                            </tr>  
  90.                        </tbody>  
  91.                                </table>  
  92.                                 
  93.                            </div>  
  94.                        </div>  
  95.                    </div>  
  96.                </td>  


选择完学年学期、教师、课程、学生后,点击"确认添加"按钮,执行"添加授课信息"事件!

         

2.通过JS获取前台授课数据,并向后台一般处理程序传递

[javascript] view plain copy
 print?
  1. //*******************************************授课点击事件******************************************//  
  2. //添加授课信息  
  3. function AddTeachCourse() {  
  4.      
  5.     //取得教师ID  
  6.     var strTeacherID = $("#hidFieldSaveTeacherID").val();  
  7.     //alert("教师ID="+txtTeacherID);  
  8.   
  9.   
  10.     //取得课程ID  
  11.     var strCourseID = $("#hidFieldSaveCourseID").val();  
  12.     //alert("课程ID="+txtCourseID);  
  13.     //取得上课班ID  
  14.     var strTeachClassID = document.getElementById("ddlTeachClass");  
  15.     var TeachClassID = strTeachClassID.options[strTeachClassID.selectedIndex].value; //得到ID  
  16.     //取得课程分配的ID(Indexing)  
  17.     var Indexing = $("#hidFieldSaveIndexing").val();  
  18.     //取得学生数量  
  19.     var stuNum = $("#txtStuNum").val();  
  20.   
  21.   
  22.     //取得listbox框ID  
  23.     var listStudent = document.getElementById("lsboxStudent");  
  24.     //取得listbox框中元素长度  
  25.     var lstStuLength = listStudent.options.length;  
  26.     //    var objJsons="";  
  27.     //    var StuArrayObj = new Array(); //创建一个数组,存储学生ID  
  28.     // StuArrayObj[i] = StudentID; //向数组中添加学生ID  
  29.   
  30.     //*******************以下是:转换json对象的过程*************************//  
  31.     var StuArrayObjs = [];  //定义一个空串  
  32.     for (var i = 0; i < lstStuLength; i++) {  
  33.   
  34.         var StudentID = listStudent.options[i].value; //取得学生ID  
  35.   
  36.         var StuArrayObj = {};       //定义一个空对象,存入数据依次写入空串  
  37.         StuArrayObj["TeacherID"] = strTeacherID;             //教师ID  
  38.         StuArrayObj["CourseID"] = strCourseID;     //课程ID  
  39.         StuArrayObj["TeachClassID"] = TeachClassID;      //上课班ID  
  40.         StuArrayObj["Indexing"] = Indexing;              //课程分配ID  
  41.         StuArrayObj["StuNum"] = stuNum;       //学生数量  
  42.         StuArrayObj["StudentID"] = StudentID;         //学生ID  
  43.   
  44.         StuArrayObjs.push(StuArrayObj);  
  45.   
  46.     }  
  47.     var TeachCourseJsonString = JSON.stringify(StuArrayObjs);  // JSON.stringify() 转换为json串  
  48.     //    var TeachCourseJson = eval("(" + TeachCourseJsonString + ")");  //转换为json对象  
  49.     //    alert(TeachCourseJson[1].TeacherID);  
  50.     //下面$.getJSON 可以传递成功,只是这样传递不能传递过长字符串  
  51.     ////    $.getJSON("../handler/AddTeachCourse.ashx", { TeachCourseJson: TeachCourseJsonString }, function (data) {  
  52.     ////        alert(data);  
  53.     ////    });  
  54.     //与AJAX交互,向一般处理程序传递json字符串数组,并返回结果  
  55.     $.post("../handler/AddTeachCourse.ashx", { TeachCourseJson: TeachCourseJsonString }, function (data) {  
  56.         alert(data);  
  57.     });  
  58.   
  59.     }  

以上有几个需要注意的地方:

   2.1.转换JSON串使用

[javascript] view plain copy
 print?
  1. JSON.stringify()  

   2.2.JS向一般处理程序传递JSON使用

[javascript] view plain copy
 print?
  1. //与AJAX交互,向一般处理程序传递json字符串数组,并返回结果  
  2.    $.post("要使用的一般处理程序路径", { TeachCourseJson: TeachCourseJsonString }, function (data) {  
  3.        alert(data);  
  4.    });  

3.一般处理程序解析JS传递过来的Json数据,并进行解析,写入DataTable中,然后写入数据库

   

[csharp] view plain copy
 print?
  1. <%@ WebHandler Language="C#" Class="AddTeachCourse" %>  
  2. /******************************************************************************* 
  3.  *文    件:AddTeachCourse.ashx 
  4.  *作    者:mzj 
  5.  *所属小组:评教小组 
  6.  *文件说明:添加授课信息 
  7.  *创建日期:2013年2月6日17:57:01 
  8.  *修改作者: 
  9.  *修改日期: 
  10.  *修改描述: 
  11.  *版 本 号:V1.0 
  12.  *版本号变更记录:      
  13. ********************************************************************************/  
  14. using System;  
  15. using System.Web;  
  16. using System.Collections.Generic;  
  17. using System.Linq;  
  18. using System.Data;  
  19.   
  20. //json使用命名空间  
  21. using Newtonsoft.Json;  
  22. using Newtonsoft.Json.Linq;  
  23.   
  24. using Newtonsoft.Json.Converters;  
  25.   
  26. using System.IO;  
  27. using System.Text;  
  28.   
  29. using TeachSystem.BLL.TeachingBLL;  
  30. using TeachSystem.Entity.TeachingEntity;  
  31.   
  32.   
  33. public class AddTeachCourse : IHttpHandler  
  34. {  
  35.   
  36.     public void ProcessRequest(HttpContext context)  
  37.     {  
  38.         context.Response.ContentType = "text/plain";  
  39.    
  40.           
  41.         //创建一个名为ds_StuTeacherCourse的DataSet  
  42.         //(用于存放表:学生、教师、课程关系表,学生、上课班关系表,课程分配上课班关系表)  
  43.         DataSet dsStuTeacherCourse = new DataSet("ds_StuTeacherCourse");  
  44.         //手动创建的新数据表-学生、教师、课程关系数据表  
  45.         DataTable dtAddStudentTeaherCourse = new DataTable("dt_AddStudentTeaherCourse"); //创建一个名为dt_AddStudentTeaherCourse的DataTalbe  
  46.         //为dt_AddStudentTeaherCourse表内建立Column(表头),添加数据列:StudentID,Indexing,IsAvailable  
  47.         dtAddStudentTeaherCourse.Columns.Add(new DataColumn("StudentID"typeof(string)));  
  48.         dtAddStudentTeaherCourse.Columns.Add(new DataColumn("Indexing"typeof(int)));  
  49.         dtAddStudentTeaherCourse.Columns.Add(new DataColumn("IsAvailable"typeof(string)));  
  50.   
  51.         //手动创建的新数据表-学生、上课班关系数据表  
  52.         DataTable dtAddStudentTeachClass = new DataTable("dt_AddStudentTeachClass"); //创建一个名为dt_AddStudentTeachClass的DataTalbe  
  53.         //为dt_AddStudentTeachClass表内建立Column(表头),添加数据列:StudentID,TeachClassID,IsAvailable  
  54.         dtAddStudentTeachClass.Columns.Add(new DataColumn("StudentID"typeof(string)));  
  55.         dtAddStudentTeachClass.Columns.Add(new DataColumn("TeachClassID"typeof(string)));  
  56.         dtAddStudentTeachClass.Columns.Add(new DataColumn("IsAvailable"typeof(string)));  
  57.   
  58.         //手动创建的新数据表-课程分配、上课班关系数据表  
  59.         DataTable dtAddCourseTeachClass = new DataTable("dt_AddCourseTeachClass"); //创建一个名为dt_AddStudentTeachClass的DataTalbe  
  60.         //为dt_AddCourseTeachClass表内建立Column(表头),添加数据列:TeachClassID,Indexing,IsAvailable  
  61.         dtAddCourseTeachClass.Columns.Add(new DataColumn("TeachClassID"typeof(string)));  
  62.         dtAddCourseTeachClass.Columns.Add(new DataColumn("Indexing"typeof(int)));  
  63.         dtAddCourseTeachClass.Columns.Add(new DataColumn("IsAvailable"typeof(string)));  
  64.         dtAddCourseTeachClass.Columns.Add(new DataColumn("OddEven"typeof(string)));  
  65.         dtAddCourseTeachClass.Columns.Add(new DataColumn("StuNum",typeof(int)));  
  66.           
  67.         //获取前台传递过来的授课JSON字符串数组  
  68.         string ss = context.Request.Form["TeachCourseJson"];  
  69.         //反序列化获取的JSON字符串数组  
  70.         JArray javascript = (JArray)JsonConvert.DeserializeObject(ss);  
  71.         //依次遍历反序列化的json字符串数组  
  72.         for (int i = 0; i < javascript.Count; i++)  
  73.         {  
  74.             //将一个个反序列化的JSON字符串数组转换成对象,并将转换后的对象的值依次赋给各变量  
  75.             JObject obj = (JObject)javascript[i];  
  76.             string strTeacherID = obj["TeacherID"].ToString();                 //教师ID  
  77.             string strCourseID = obj["CourseID"].ToString();                   //课程ID  
  78.             string strTeachClassID = obj["TeachClassID"].ToString();           //上课班ID  
  79.             int intIndexing = Convert.ToInt32(obj["Indexing"].ToString());     //课程分配ID  
  80.             int intStuNum = Convert.ToInt32(obj["StuNum"].ToString());         //授课学生人数  
  81.             string strStudentID = obj["StudentID"].ToString();                 //学生ID  
  82.   
  83.             //添加学生、教师、课程关系信息表的新行  
  84.             DataRow drAddStudentTeaherCourse = dtAddStudentTeaherCourse.NewRow();//注意这边创建dt的新行的方法。指定类型是DataRow而不是TableRow,然后不用new直接的用创建的DataTable下面的NewRow方法。  
  85.             //学生、教师、课程关系信息表对应的各列值  
  86.             drAddStudentTeaherCourse["StudentID"] = strStudentID;         //学生ID  
  87.             drAddStudentTeaherCourse["Indexing"] = intIndexing;           //课程分配ID  
  88.             drAddStudentTeaherCourse["IsAvailable"] = "是";  
  89.             dtAddStudentTeaherCourse.Rows.Add(drAddStudentTeaherCourse);  //将一整条数据写入表中  
  90.   
  91.             //添加学生、上课班关系信息表的新行  
  92.             DataRow drAddStudentTeachClass = dtAddStudentTeachClass.NewRow();//注意这边创建dt的新行的方法。指定类型是DataRow而不是TableRow,然后不用new直接的用创建的DataTable下面的NewRow方法。  
  93.             //学生、上课班关系信息表对应的各列值  
  94.             drAddStudentTeachClass["StudentID"] = strStudentID;             //学生ID  
  95.             drAddStudentTeachClass["TeachClassID"] = strTeachClassID;       //上课班ID  
  96.             drAddStudentTeachClass["IsAvailable"] = "是";  
  97.             dtAddStudentTeachClass.Rows.Add(drAddStudentTeachClass);  //将一整条数据写入表中  
  98.   
  99.         }  
  100.          
  101.           
  102.             JObject objs = (JObject)javascript[0];  
  103.             
  104.             string strTeachClassIDs = objs["TeachClassID"].ToString();  
  105.             int intIndexings = Convert.ToInt32(objs["Indexing"].ToString());  
  106.             int intStuNums = Convert.ToInt32(objs["StuNum"].ToString());  
  107.               
  108.              
  109.            //添加课程分配、上课班关系信息表的新行  
  110.             DataRow drAddCourseTeachClass = dtAddCourseTeachClass.NewRow();//注意这边创建dt的新行的方法。指定类型是DataRow而不是TableRow,然后不用new直接的用创建的DataTable下面的NewRow方法。  
  111.             //课程分配、上课班关系信息表对应的各列值  
  112.             drAddCourseTeachClass["TeachClassID"] = strTeachClassIDs;  
  113.             drAddCourseTeachClass["Indexing"] = intIndexings;  
  114.             drAddCourseTeachClass["IsAvailable"] = "是";  
  115.             drAddCourseTeachClass["OddEven"] = null;  
  116.             drAddCourseTeachClass["StuNum"] = intStuNums;  
  117.             dtAddCourseTeachClass.Rows.Add(drAddCourseTeachClass);  //将一整条数据写入表中  
  118.               
  119.   
  120.         //将各表加入DataSet中:  
  121.         dsStuTeacherCourse.Tables.Add(dtAddStudentTeaherCourse);  
  122.         dsStuTeacherCourse.Tables.Add(dtAddStudentTeachClass);  
  123.         dsStuTeacherCourse.Tables.Add(dtAddCourseTeachClass);  
  124.   
  125.         //将DataSet中数据表导入数据库  
  126.         Boolean flagImportStuTeacherCourse = new TeachCourseBLL().ImportStudentTeacherCourse(dsStuTeacherCourse);         
  127.         //JsonReader reader = new JsonReader(new StringReader(jsonText))  
  128.           
  129.         //string s = context.Request.Form["TeachCourseJson"];  
  130.         context.Response.Write(flagImportStuTeacherCourse);  
  131.         context.Response.End();  
  132.           
  133.          
  134.        
  135.     }  
  136.       
  137.   
  138.     public bool IsReusable  
  139.     {  
  140.         get  
  141.         {  
  142.             return false;  
  143.         }  
  144.     }  
  145.   
  146. }  
一般处理程序代码,需要注意几点:

   3.1 获取前台传递过来的JSON字符串数组

[csharp] view plain copy
 print?
  1. //获取前台传递过来的授课JSON字符串数组  
  2.        string ss = context.Request.Form["TeachCourseJson"];  

   3.2 反序列化前台传来的JSON字符才能换数组

[csharp] view plain copy
 print?
  1. //反序列化获取的JSON字符串数组  
  2.       JArray javascript = (JArray)JsonConvert.DeserializeObject(ss);  

    3.3自定义Dataset,并建立各数据表,将前台传来的数据写入DataTable表

创建Dataset及数据表

[csharp] view plain copy
 print?
  1. //创建一个名为ds_StuTeacherCourse的DataSet  
  2.       //(用于存放表:学生、教师、课程关系表,学生、上课班关系表,课程分配上课班关系表)  
  3.       DataSet dsStuTeacherCourse = new DataSet("ds_StuTeacherCourse");  
  4.       //手动创建的新数据表-学生、教师、课程关系数据表  
  5.       DataTable dtAddStudentTeaherCourse = new DataTable("dt_AddStudentTeaherCourse"); //创建一个名为dt_AddStudentTeaherCourse的DataTalbe  
  6.       //为dt_AddStudentTeaherCourse表内建立Column(表头),添加数据列:StudentID,Indexing,IsAvailable  
  7.       dtAddStudentTeaherCourse.Columns.Add(new DataColumn("StudentID"typeof(string)));  
  8.       dtAddStudentTeaherCourse.Columns.Add(new DataColumn("Indexing"typeof(int)));  
  9.       dtAddStudentTeaherCourse.Columns.Add(new DataColumn("IsAvailable"typeof(string)));  
  10.   
  11.       //手动创建的新数据表-学生、上课班关系数据表  
  12.       DataTable dtAddStudentTeachClass = new DataTable("dt_AddStudentTeachClass"); //创建一个名为dt_AddStudentTeachClass的DataTalbe  
  13.       //为dt_AddStudentTeachClass表内建立Column(表头),添加数据列:StudentID,TeachClassID,IsAvailable  
  14.       dtAddStudentTeachClass.Columns.Add(new DataColumn("StudentID"typeof(string)));  
  15.       dtAddStudentTeachClass.Columns.Add(new DataColumn("TeachClassID"typeof(string)));  
  16.       dtAddStudentTeachClass.Columns.Add(new DataColumn("IsAvailable"typeof(string)));  
  17.   
  18.       //手动创建的新数据表-课程分配、上课班关系数据表  
  19.       DataTable dtAddCourseTeachClass = new DataTable("dt_AddCourseTeachClass"); //创建一个名为dt_AddStudentTeachClass的DataTalbe  
  20.       //为dt_AddCourseTeachClass表内建立Column(表头),添加数据列:TeachClassID,Indexing,IsAvailable  
  21.       dtAddCourseTeachClass.Columns.Add(new DataColumn("TeachClassID"typeof(string)));  
  22.       dtAddCourseTeachClass.Columns.Add(new DataColumn("Indexing"typeof(int)));  
  23.       dtAddCourseTeachClass.Columns.Add(new DataColumn("IsAvailable"typeof(string)));  
  24.       dtAddCourseTeachClass.Columns.Add(new DataColumn("OddEven"typeof(string)));  
  25.       dtAddCourseTeachClass.Columns.Add(new DataColumn("StuNum",typeof(int)));  
向数据表填充数据,例如

[csharp] view plain copy
 print?
  1. //添加课程分配、上课班关系信息表的新行  
  2.           DataRow drAddCourseTeachClass = dtAddCourseTeachClass.NewRow();//注意这边创建dt的新行的方法。指定类型是DataRow而不是TableRow,然后不用new直接的用创建的DataTable下面的NewRow方法。  
  3.           //课程分配、上课班关系信息表对应的各列值  
  4.           drAddCourseTeachClass["TeachClassID"] = strTeachClassIDs;  
  5.           drAddCourseTeachClass["Indexing"] = intIndexings;  
  6.           drAddCourseTeachClass["IsAvailable"] = "是";  
  7.           drAddCourseTeachClass["OddEven"] = null;  
  8.           drAddCourseTeachClass["StuNum"] = intStuNums;  
  9.           dtAddCourseTeachClass.Rows.Add(drAddCourseTeachClass);  //将一整条数据写入表中  
将各数据表存入DataSet

[csharp] view plain copy
 print?
  1. //将各表加入DataSet中:  
  2.        dsStuTeacherCourse.Tables.Add(dtAddStudentTeaherCourse);  
  3.        dsStuTeacherCourse.Tables.Add(dtAddStudentTeachClass);  
  4.        dsStuTeacherCourse.Tables.Add(dtAddCourseTeachClass);  

    3.4将DataSet中各数据表写入数据库

[csharp] view plain copy
 print?
  1. //将DataSet中数据表导入数据库  
  2.        Boolean flagImportStuTeacherCourse = new TeachCourseBLL().ImportStudentTeacherCourse(dsStuTeacherCourse);   

后台一般处理程序向前台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事件

      

     学期DropDownList框的HTML代码:

      

    2.在授课JS文件中,编写学年OnChange事件中查找学期的方法(SelectSemesterBySchYear())

      注意:不要忘了在授课页面头部引入此JS文件哦!

      通过此JS文件,向一般处理程序传递学年,并对传回的JSON学期信息解析,显示在学期DropDownList中。

       

[javascript] view plain copy
 print?
  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 plain copy
 print?
  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 plain copy
 print?
  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 plain copy
 print?
  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 plain copy
 print?
  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 plain copy
 print?
  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数据后的两种显示方式就介绍完了!


1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:269961次
    • 积分:3095
    • 等级:
    • 排名:第11246名
    • 原创:18篇
    • 转载:346篇
    • 译文:2篇
    • 评论:4条
    最新评论