《项目经验》--通过js获取前台数据向一般处理程序传递Json数据，并解析Json数据，将前台传来的Json数据写入数据库表中

2023-08-20 20:45:28

  先看一下我要实现的功能界面：  《项目经验》--通过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代码

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

 

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

《项目经验》--通过js获取前台数据向一般处理程序传递Json数据，并解析Json数据，将前台传来的Json数据写入数据库表中

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

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

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

   2.1.转换JSON串使用

  1. JSON.stringify()

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

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

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

  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. //json使用命名空间
  20. using Newtonsoft.Json;
  21. using Newtonsoft.Json.Linq;
  22. using Newtonsoft.Json.Converters;
  23. using System.IO;
  24. using System.Text;
  25. using TeachSystem.BLL.TeachingBLL;
  26. using TeachSystem.Entity.TeachingEntity;
  27. public class AddTeachCourse : IHttpHandler
  28. {
  29. public void ProcessRequest(HttpContext context)
  30. {
  31. context.Response.ContentType = "text/plain";
  32. //创建一个名为ds_StuTeacherCourse的DataSet
  33. //(用于存放表：学生、教师、课程关系表，学生、上课班关系表，课程分配上课班关系表)
  34. DataSet dsStuTeacherCourse = new DataSet("ds_StuTeacherCourse");
  35. //手动创建的新数据表-学生、教师、课程关系数据表
  36. DataTable dtAddStudentTeaherCourse = new DataTable("dt_AddStudentTeaherCourse"); //创建一个名为dt_AddStudentTeaherCourse的DataTalbe
  37. //为dt_AddStudentTeaherCourse表内建立Column（表头）,添加数据列:StudentID，Indexing，IsAvailable
  38. dtAddStudentTeaherCourse.Columns.Add(new DataColumn("StudentID", typeof(string)));
  39. dtAddStudentTeaherCourse.Columns.Add(new DataColumn("Indexing", typeof(int)));
  40. dtAddStudentTeaherCourse.Columns.Add(new DataColumn("IsAvailable", typeof(string)));
  41. //手动创建的新数据表-学生、上课班关系数据表
  42. DataTable dtAddStudentTeachClass = new DataTable("dt_AddStudentTeachClass"); //创建一个名为dt_AddStudentTeachClass的DataTalbe
  43. //为dt_AddStudentTeachClass表内建立Column（表头）,添加数据列:StudentID，TeachClassID，IsAvailable
  44. dtAddStudentTeachClass.Columns.Add(new DataColumn("StudentID", typeof(string)));
  45. dtAddStudentTeachClass.Columns.Add(new DataColumn("TeachClassID", typeof(string)));
  46. dtAddStudentTeachClass.Columns.Add(new DataColumn("IsAvailable", typeof(string)));
  47. //手动创建的新数据表-课程分配、上课班关系数据表
  48. DataTable dtAddCourseTeachClass = new DataTable("dt_AddCourseTeachClass"); //创建一个名为dt_AddStudentTeachClass的DataTalbe
  49. //为dt_AddCourseTeachClass表内建立Column（表头）,添加数据列:TeachClassID，Indexing，IsAvailable
  50. dtAddCourseTeachClass.Columns.Add(new DataColumn("TeachClassID", typeof(string)));
  51. dtAddCourseTeachClass.Columns.Add(new DataColumn("Indexing", typeof(int)));
  52. dtAddCourseTeachClass.Columns.Add(new DataColumn("IsAvailable", typeof(string)));
  53. dtAddCourseTeachClass.Columns.Add(new DataColumn("OddEven", typeof(string)));
  54. dtAddCourseTeachClass.Columns.Add(new DataColumn("StuNum",typeof(int)));
  55. //获取前台传递过来的授课JSON字符串数组
  56. string ss = context.Request.Form["TeachCourseJson"];
  57. //反序列化获取的JSON字符串数组
  58. JArray javascript = (JArray)JsonConvert.DeserializeObject(ss);
  59. //依次遍历反序列化的json字符串数组
  60. for (int i = 0; i < javascript.Count; i++)
  61. {
  62. //将一个个反序列化的JSON字符串数组转换成对象，并将转换后的对象的值依次赋给各变量
  63. JObject obj = (JObject)javascript[i];
  64. string strTeacherID = obj["TeacherID"].ToString();                 //教师ID
  65. string strCourseID = obj["CourseID"].ToString();                   //课程ID
  66. string strTeachClassID = obj["TeachClassID"].ToString();           //上课班ID
  67. int intIndexing = Convert.ToInt32(obj["Indexing"].ToString());     //课程分配ID
  68. int intStuNum = Convert.ToInt32(obj["StuNum"].ToString());         //授课学生人数
  69. string strStudentID = obj["StudentID"].ToString();                 //学生ID
  70. //添加学生、教师、课程关系信息表的新行
  71. DataRow drAddStudentTeaherCourse = dtAddStudentTeaherCourse.NewRow();//注意这边创建dt的新行的方法。指定类型是DataRow而不是TableRow，然后不用new直接的用创建的DataTable下面的NewRow方法。
  72. //学生、教师、课程关系信息表对应的各列值
  73. drAddStudentTeaherCourse["StudentID"] = strStudentID;         //学生ID
  74. drAddStudentTeaherCourse["Indexing"] = intIndexing;           //课程分配ID
  75. drAddStudentTeaherCourse["IsAvailable"] = "是";
  76. dtAddStudentTeaherCourse.Rows.Add(drAddStudentTeaherCourse);  //将一整条数据写入表中
  77. //添加学生、上课班关系信息表的新行
  78. DataRow drAddStudentTeachClass = dtAddStudentTeachClass.NewRow();//注意这边创建dt的新行的方法。指定类型是DataRow而不是TableRow，然后不用new直接的用创建的DataTable下面的NewRow方法。
  79. //学生、上课班关系信息表对应的各列值
  80. drAddStudentTeachClass["StudentID"] = strStudentID;             //学生ID
  81. drAddStudentTeachClass["TeachClassID"] = strTeachClassID;       //上课班ID
  82. drAddStudentTeachClass["IsAvailable"] = "是";
  83. dtAddStudentTeachClass.Rows.Add(drAddStudentTeachClass);  //将一整条数据写入表中
  84. }
  85. JObject objs = (JObject)javascript[0];
  86. string strTeachClassIDs = objs["TeachClassID"].ToString();
  87. int intIndexings = Convert.ToInt32(objs["Indexing"].ToString());
  88. int intStuNums = Convert.ToInt32(objs["StuNum"].ToString());
  89. //添加课程分配、上课班关系信息表的新行
  90. DataRow drAddCourseTeachClass = dtAddCourseTeachClass.NewRow();//注意这边创建dt的新行的方法。指定类型是DataRow而不是TableRow，然后不用new直接的用创建的DataTable下面的NewRow方法。
  91. //课程分配、上课班关系信息表对应的各列值
  92. drAddCourseTeachClass["TeachClassID"] = strTeachClassIDs;
  93. drAddCourseTeachClass["Indexing"] = intIndexings;
  94. drAddCourseTeachClass["IsAvailable"] = "是";
  95. drAddCourseTeachClass["OddEven"] = null;
  96. drAddCourseTeachClass["StuNum"] = intStuNums;
  97. dtAddCourseTeachClass.Rows.Add(drAddCourseTeachClass);  //将一整条数据写入表中
  98. //将各表加入DataSet中:
  99. dsStuTeacherCourse.Tables.Add(dtAddStudentTeaherCourse);
  100. dsStuTeacherCourse.Tables.Add(dtAddStudentTeachClass);
  101. dsStuTeacherCourse.Tables.Add(dtAddCourseTeachClass);
  102. //将DataSet中数据表导入数据库
  103. Boolean flagImportStuTeacherCourse = new TeachCourseBLL().ImportStudentTeacherCourse(dsStuTeacherCourse);
  104. //JsonReader reader = new JsonReader(new StringReader(jsonText))
  105. //string s = context.Request.Form["TeachCourseJson"];
  106. context.Response.Write(flagImportStuTeacherCourse);
  107. context.Response.End();
  108. }
  109. public bool IsReusable
  110. {
  111. get
  112. {
  113. return false;
  114. }
  115. }
  116. }

一般处理程序代码，需要注意几点:

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

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

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

  1. //反序列化获取的JSON字符串数组
  2. JArray javascript = (JArray)JsonConvert.DeserializeObject(ss);

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

创建Dataset及数据表

  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. DataTable dtAddStudentTeachClass = new DataTable("dt_AddStudentTeachClass"); //创建一个名为dt_AddStudentTeachClass的DataTalbe
  12. //为dt_AddStudentTeachClass表内建立Column（表头）,添加数据列:StudentID，TeachClassID，IsAvailable
  13. dtAddStudentTeachClass.Columns.Add(new DataColumn("StudentID", typeof(string)));
  14. dtAddStudentTeachClass.Columns.Add(new DataColumn("TeachClassID", typeof(string)));
  15. dtAddStudentTeachClass.Columns.Add(new DataColumn("IsAvailable", typeof(string)));
  16. //手动创建的新数据表-课程分配、上课班关系数据表
  17. DataTable dtAddCourseTeachClass = new DataTable("dt_AddCourseTeachClass"); //创建一个名为dt_AddStudentTeachClass的DataTalbe
  18. //为dt_AddCourseTeachClass表内建立Column（表头）,添加数据列:TeachClassID，Indexing，IsAvailable
  19. dtAddCourseTeachClass.Columns.Add(new DataColumn("TeachClassID", typeof(string)));
  20. dtAddCourseTeachClass.Columns.Add(new DataColumn("Indexing", typeof(int)));
  21. dtAddCourseTeachClass.Columns.Add(new DataColumn("IsAvailable", typeof(string)));
  22. dtAddCourseTeachClass.Columns.Add(new DataColumn("OddEven", typeof(string)));
  23. dtAddCourseTeachClass.Columns.Add(new DataColumn("StuNum",typeof(int)));

向数据表填充数据，例如

  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

  1. //将各表加入DataSet中:
  2. dsStuTeacherCourse.Tables.Add(dtAddStudentTeaherCourse);
  3. dsStuTeacherCourse.Tables.Add(dtAddStudentTeachClass);
  4. dsStuTeacherCourse.Tables.Add(dtAddCourseTeachClass);

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

  1. //将DataSet中数据表导入数据库
  2. Boolean flagImportStuTeacherCourse = new TeachCourseBLL().ImportStudentTeacherCourse(dsStuTeacherCourse);

这篇文章仅仅介绍了添加授课功能的实现，所需要的JS文件及一般处理程序文件，导入数据库用到的BLL层类方法等没有介绍，批量导入数据功能的实现见博客《《项目经验》--简单三层使用DataTable向数据库表批量导入数据---向SqlServer一张表中导入数据》《《项目经验》--简单三层使用DataTable向数据库表批量导入数据---向SqlServer多张张表中导入数据》！

上一篇：Direct3D 11的资源


下一篇：公众号第三方平台开发-aes解密失败