程序博客网 > 淘宝怎么调价格

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

来源：互联网 发布：淘宝怎么调价格 编辑：程序博客网 时间：2024/06/07 18:45

通过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
淘宝怎么调价格 淘宝怎么调价格
原创粉丝点击
热门IT博客
世界最强黑客知乎世界最强黑客知乎
网络kqueue网络kqueue
js click target
logo设计 软件
mac ios模拟器安装ipa
防火墙软件测试报告
asp注册传到数据库
判断推理解题技巧知乎
正品扫码软件
淘宝一千零一夜视频
淘宝卖家版千牛下载
此情唯有落花知txt
计算机算法的特征
access数据库怎么查询
淘优多源码论坛
canny边缘检测算法
asp.net crm源码
java开发实战经典ppt
淘宝小米f码是真的吗
网络架构师培训
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 下智齿好拔吗 智齿卡通图片 拔智齿上牙下牙有区别吗 补智齿 涨智齿 上面的智齿好拔吗 上牙智齿 拔智齿多久 智齿能补吗 智齿可以补吗 把智齿 哪颗是智齿 什么智齿 智齿140分钟 长智齿了 上期 女生上顾所全部图片 女性上顾所图片 上生新所 上则所出血是怎么回事 上期所 上期所原油期货 上期所交易时间 上期所黄金交易时间 上海商品期货交易所 上海期货交易软件手机版 上海黄金期货 朱卫线高速时刻表 蓝忘机自愿让魏无羡上 上机数控股吧 台式机无线网卡连接不上 上胶机价格 上杉升 上杉升年轻对比照 司考法条哪个好 2018世界上蓝鲸还剩多少条 怀旧服卡蓝条 魔兽世界卡蓝条 蓝熊船长的13条半命 魔兽世界卡蓝条解决方法 上杭县

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里