当前位置：首页 > 芯闻号 > 充电吧

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

时间：2020-01-09 10:00:01
关键字： 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 plaincopy print?

添加信息列表

教师名： <%--隐藏控件，保存教师id--%> 课程名： <%--隐藏控件，保存课程id--%> <%--隐藏控件，保存教师、课程关系indexing--%> 选择上课班： <%----%> 已选授课人数 学生姓名列表

<%----%>


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


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

[javascript]view plaincopy print? //*******************************************授课点击事件******************************************// //添加授课信息 functionAddTeachCourse(){ //取得教师ID varstrTeacherID=$("#hidFieldSaveTeacherID").val(); //alert("教师ID="+txtTeacherID); //取得课程ID varstrCourseID=$("#hidFieldSaveCourseID").val(); //alert("课程ID="+txtCourseID); //取得上课班ID varstrTeachClassID=document.getElementById("ddlTeachClass"); varTeachClassID=strTeachClassID.options[strTeachClassID.selectedIndex].value;//得到ID //取得课程分配的ID（Indexing） varIndexing=$("#hidFieldSaveIndexing").val(); //取得学生数量 varstuNum=$("#txtStuNum").val(); //取得listbox框ID varlistStudent=document.getElementById("lsboxStudent"); //取得listbox框中元素长度 varlstStuLength=listStudent.options.length; //varobjJsons=""; //varStuArrayObj=newArray();//创建一个数组,存储学生ID //StuArrayObj[i]=StudentID;//向数组中添加学生ID //*******************以下是：转换json对象的过程*************************// varStuArrayObjs=[];//定义一个空串 for(vari=0;i 以上有几个需要注意的地方：

2.1.转换JSON串使用

[javascript]view plaincopy print? JSON.stringify()

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

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

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

[csharp]view plaincopy print? <%@WebHandlerLanguage="C#"Class="AddTeachCourse"%> /******************************************************************************* *文件：AddTeachCourse.ashx *作者：mzj *所属小组：评教小组 *文件说明：添加授课信息 *创建日期：2013年2月6日17:57:01 *修改作者： *修改日期： *修改描述： *版本号：V1.0 *版本号变更记录： ********************************************************************************/ usingSystem; usingSystem.Web; usingSystem.Collections.Generic; usingSystem.Linq; usingSystem.Data; //json使用命名空间 usingNewtonsoft.Json; usingNewtonsoft.Json.Linq; usingNewtonsoft.Json.Converters; usingSystem.IO; usingSystem.Text; usingTeachSystem.BLL.TeachingBLL; usingTeachSystem.Entity.TeachingEntity; publicclassAddTeachCourse:IHttpHandler { publicvoidProcessRequest(HttpContextcontext) { context.Response.ContentType="text/plain"; //创建一个名为ds_StuTeacherCourse的DataSet //(用于存放表：学生、教师、课程关系表，学生、上课班关系表，课程分配上课班关系表) DataSetdsStuTeacherCourse=newDataSet("ds_StuTeacherCourse"); //手动创建的新数据表-学生、教师、课程关系数据表 DataTabledtAddStudentTeaherCourse=newDataTable("dt_AddStudentTeaherCourse");//创建一个名为dt_AddStudentTeaherCourse的DataTalbe //为dt_AddStudentTeaherCourse表内建立Column（表头）,添加数据列:StudentID，Indexing，IsAvailable dtAddStudentTeaherCourse.Columns.Add(newDataColumn("StudentID",typeof(string))); dtAddStudentTeaherCourse.Columns.Add(newDataColumn("Indexing",typeof(int))); dtAddStudentTeaherCourse.Columns.Add(newDataColumn("IsAvailable",typeof(string))); //手动创建的新数据表-学生、上课班关系数据表 DataTabledtAddStudentTeachClass=newDataTable("dt_AddStudentTeachClass");//创建一个名为dt_AddStudentTeachClass的DataTalbe //为dt_AddStudentTeachClass表内建立Column（表头）,添加数据列:StudentID，TeachClassID，IsAvailable dtAddStudentTeachClass.Columns.Add(newDataColumn("StudentID",typeof(string))); dtAddStudentTeachClass.Columns.Add(newDataColumn("TeachClassID",typeof(string))); dtAddStudentTeachClass.Columns.Add(newDataColumn("IsAvailable",typeof(string))); //手动创建的新数据表-课程分配、上课班关系数据表 DataTabledtAddCourseTeachClass=newDataTable("dt_AddCourseTeachClass");//创建一个名为dt_AddStudentTeachClass的DataTalbe //为dt_AddCourseTeachClass表内建立Column（表头）,添加数据列:TeachClassID，Indexing，IsAvailable dtAddCourseTeachClass.Columns.Add(newDataColumn("TeachClassID",typeof(string))); dtAddCourseTeachClass.Columns.Add(newDataColumn("Indexing",typeof(int))); dtAddCourseTeachClass.Columns.Add(newDataColumn("IsAvailable",typeof(string))); dtAddCourseTeachClass.Columns.Add(newDataColumn("OddEven",typeof(string))); dtAddCourseTeachClass.Columns.Add(newDataColumn("StuNum",typeof(int))); //获取前台传递过来的授课JSON字符串数组 stringss=context.Request.Form["TeachCourseJson"]; //反序列化获取的JSON字符串数组 JArrayjavascript=(JArray)JsonConvert.DeserializeObject(ss); //依次遍历反序列化的json字符串数组 for(inti=0;i

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

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

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

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

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

创建Dataset及数据表

[csharp]view plaincopy print? //创建一个名为ds_StuTeacherCourse的DataSet //(用于存放表：学生、教师、课程关系表，学生、上课班关系表，课程分配上课班关系表) DataSetdsStuTeacherCourse=newDataSet("ds_StuTeacherCourse"); //手动创建的新数据表-学生、教师、课程关系数据表 DataTabledtAddStudentTeaherCourse=newDataTable("dt_AddStudentTeaherCourse");//创建一个名为dt_AddStudentTeaherCourse的DataTalbe //为dt_AddStudentTeaherCourse表内建立Column（表头）,添加数据列:StudentID，Indexing，IsAvailable dtAddStudentTeaherCourse.Columns.Add(newDataColumn("StudentID",typeof(string))); dtAddStudentTeaherCourse.Columns.Add(newDataColumn("Indexing",typeof(int))); dtAddStudentTeaherCourse.Columns.Add(newDataColumn("IsAvailable",typeof(string))); //手动创建的新数据表-学生、上课班关系数据表 DataTabledtAddStudentTeachClass=newDataTable("dt_AddStudentTeachClass");//创建一个名为dt_AddStudentTeachClass的DataTalbe //为dt_AddStudentTeachClass表内建立Column（表头）,添加数据列:StudentID，TeachClassID，IsAvailable dtAddStudentTeachClass.Columns.Add(newDataColumn("StudentID",typeof(string))); dtAddStudentTeachClass.Columns.Add(newDataColumn("TeachClassID",typeof(string))); dtAddStudentTeachClass.Columns.Add(newDataColumn("IsAvailable",typeof(string))); //手动创建的新数据表-课程分配、上课班关系数据表 DataTabledtAddCourseTeachClass=newDataTable("dt_AddCourseTeachClass");//创建一个名为dt_AddStudentTeachClass的DataTalbe //为dt_AddCourseTeachClass表内建立Column（表头）,添加数据列:TeachClassID，Indexing，IsAvailable dtAddCourseTeachClass.Columns.Add(newDataColumn("TeachClassID",typeof(string))); dtAddCourseTeachClass.Columns.Add(newDataColumn("Indexing",typeof(int))); dtAddCourseTeachClass.Columns.Add(newDataColumn("IsAvailable",typeof(string))); dtAddCourseTeachClass.Columns.Add(newDataColumn("OddEven",typeof(string))); dtAddCourseTeachClass.Columns.Add(newDataColumn("StuNum",typeof(int))); 向数据表填充数据，例如

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

[csharp]view plaincopy print? //将各表加入DataSet中: dsStuTeacherCourse.Tables.Add(dtAddStudentTeaherCourse); dsStuTeacherCourse.Tables.Add(dtAddStudentTeachClass); dsStuTeacherCourse.Tables.Add(dtAddCourseTeachClass);

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

[csharp]view plaincopy print? //将DataSet中数据表导入数据库 BooleanflagImportStuTeacherCourse=newTeachCourseBLL().ImportStudentTeacherCourse(dsStuTeacherCourse);

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






本站声明： 本文章由作者或相关机构授权发布，目的在于传递更多信息，并不代表本站赞同其观点，本站亦不保证或承诺内容真实性等。需要转载请联系该专栏作者，如若文章内容侵犯您的权益，请及时联系本站删除（ 邮箱：macysun@21ic.com ）。
换一批
延伸阅读
关闭