zoukankan      html  css  js  c++  java

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

    摘自:http://blog.csdn.net/mazhaojuan/article/details/8592015

    通过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 plaincopyprint?
    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=" 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 plaincopyprint?
    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 plaincopyprint?
    1. JSON.stringify()  

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

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


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

       

    [csharp] view plaincopyprint?
    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 plaincopyprint?
    1. //获取前台传递过来的授课JSON字符串数组  
    2.        string ss = context.Request.Form["TeachCourseJson"];  

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

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

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

    创建Dataset及数据表

    [csharp] view plaincopyprint?
    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 plaincopyprint?
    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 plaincopyprint?
    1. //将各表加入DataSet中:  
    2.        dsStuTeacherCourse.Tables.Add(dtAddStudentTeaherCourse);  
    3.        dsStuTeacherCourse.Tables.Add(dtAddStudentTeachClass);  
    4.        dsStuTeacherCourse.Tables.Add(dtAddCourseTeachClass);  

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

    [csharp] view plaincopyprint?
      1. //将DataSet中数据表导入数据库  
      2.        Boolean flagImportStuTeacherCourse = new TeachCourseBLL().ImportStudentTeacherCourse(dsStuTeacherCourse);  
  • 相关阅读:
    finereport 文档
    FineRport 工作用
    SQL 排序
    fineReport
    python | Mysql 索引优化分析
    python | 缓存穿透、缓存雪崩和缓存击穿面试题
    python | Jenkins构建Spring Boot 详细步骤
    python | MySQL全面查询的正则匹配
    python | TCP 三次握手和四次挥手图解（有限状态机）
    python | 3款工具实现快速K8S开发
  • 原文地址：https://www.cnblogs.com/nov5026/p/4522127.html
Copyright © 2011-2022 走看看