通過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代碼

 

<!--添加各項列表-->
               <td class="addlist">
                   <div class="block">
                       <div class="h">
                           <span class="icon-sprite icon-list"></span>
                           <h3>
                               添加信息列表</h3>
                       </div>
                       <div class="tl corner">
                       </div>
                       <div class="tr corner">
                       </div>
                       <div class="bl corner">
                       </div>
                       <div class="br corner">
                       </div>
                       <div class="cnt-wp">
                           <div class="cnt" style="width: 450px; height: 400px; overflow: scroll;">
                               <table class="data-form" id="tabAddList" border="0" cellspacing="0" width="450px"
                                   align="center" cellpadding="0">
                                      <tbody>

                           <tr>
                               <th scope="row">
                                   教師名：
                               </th>
                               <td>
                                   <asp:TextBox CssClass="input-normal" ID="txtAddTeacherName" runat="server"
                                       Enabled="False"></asp:TextBox>
                                   <%--隱藏控件，保存教師id--%>
                                   <asp:HiddenField ID="hidFieldSaveTeacherID" runat="server" />
                               </td>
                           </tr>
                            <tr>
                               <th scope="row">
                                   課程名：
                               </th>
                               <td>
                                   <asp:TextBox CssClass="input-normal" ID="txtAddCourseName" runat="server"
                                       Enabled="False"></asp:TextBox>
                                   <%--隱藏控件，保存課程id--%>
                                   <asp:HiddenField ID="hidFieldSaveCourseID" runat="server" />
                                   <%--隱藏控件，保存教師、課程關系indexing--%>
                                   <asp:HiddenField ID="hidFieldSaveIndexing" runat="server" />
                               </td>
                           </tr>
                           <tr>
                               <th scope="row">
                                   選擇上課班：
                               </th>
                               <td>
                                   <asp:DropDownList ID="ddlTeachClass" CssClass="input-normal" runat="server">
                                   </asp:DropDownList>
                               </td>
                                <td>
                                  <%-- <asp:Button ID="btnAddTeachClass" runat="server" Text="添加一個上課班" OnClick="btnAddTeachClass_Click" />--%>

                                     <input id="btnAddTeachClass" type="button" class="btn-lit" value="確認添加" onclick="AddTeachClass()" />
                               </td>
                           </tr>
                           <tr>
                               <th scope="row">
                                   已選授課人數
                               </th>
                               <td>
                                   <asp:TextBox CssClass="input-normal" ID="txtStuNum" runat="server"
                                       Enabled="False"></asp:TextBox>
                               </td>
                           </tr>
                           <tr>
                               <th scope="row">
                                   學生姓名列表
                               </th>
                               <td>
                                   <asp:ListBox ID="lsboxStudent" runat="server" Height="150px" Width="250px"></asp:ListBox>
                               </td>
                           </tr>

                           <tr>
                               <th scope="row">
                                    <br />
                               </th>
                               <td>
                                   <br />
                                    <%--<asp:Button ID="btnAddTeachCourse" class="btn-lit" runat="server" Text="確認添加"
                                       onclick="btnAddTeachCourse_Click" />--%>
                                   <input id="btnAddTeachCourse" type="button" class="btn-lit" value="確認添加" onclick="AddTeachCourse()" />
                               </td>
                           </tr>
                       </tbody>
                               </table>

                           </div>
                       </div>
                   </div>
               </td>

選擇完學年學期、教師、課程、學生后，點擊"確認添加"按鈕，執行"添加授課信息"事件!

         

2.通過JS獲取前台授課數據，並向后台一般處理程序傳遞

 

//*******************************************授課點擊事件******************************************//
//添加授課信息
function AddTeachCourse() {

    //取得教師ID
    var strTeacherID = $("#hidFieldSaveTeacherID").val();
    //alert("教師ID="+txtTeacherID);


    //取得課程ID
    var strCourseID = $("#hidFieldSaveCourseID").val();
    //alert("課程ID="+txtCourseID);
    //取得上課班ID
    var strTeachClassID = document.getElementById("ddlTeachClass");
    var TeachClassID = strTeachClassID.options[strTeachClassID.selectedIndex].value; //得到ID
    //取得課程分配的ID（Indexing）
    var Indexing = $("#hidFieldSaveIndexing").val();
    //取得學生數量
    var stuNum = $("#txtStuNum").val();


    //取得listbox框ID
    var listStudent = document.getElementById("lsboxStudent");
    //取得listbox框中元素長度
    var lstStuLength = listStudent.options.length;
    //    var objJsons="";
    //    var StuArrayObj = new Array(); //創建一個數組,存儲學生ID
    // StuArrayObj[i] = StudentID; //向數組中添加學生ID

    //*******************以下是：轉換json對象的過程*************************//
    var StuArrayObjs = [];  //定義一個空串
    for (var i = 0; i < lstStuLength; i++) {

        var StudentID = listStudent.options[i].value; //取得學生ID

        var StuArrayObj = {};       //定義一個空對象，存入數據依次寫入空串
        StuArrayObj["TeacherID"] = strTeacherID;             //教師ID
        StuArrayObj["CourseID"] = strCourseID;     //課程ID
        StuArrayObj["TeachClassID"] = TeachClassID;      //上課班ID
        StuArrayObj["Indexing"] = Indexing;              //課程分配ID
        StuArrayObj["StuNum"] = stuNum;       //學生數量
        StuArrayObj["StudentID"] = StudentID;         //學生ID

        StuArrayObjs.push(StuArrayObj);

    }
    var TeachCourseJsonString = JSON.stringify(StuArrayObjs);  // JSON.stringify() 轉換為json串
    //    var TeachCourseJson = eval("(" + TeachCourseJsonString + ")");  //轉換為json對象
    //    alert(TeachCourseJson[1].TeacherID);
    //下面$.getJSON 可以傳遞成功，只是這樣傳遞不能傳遞過長字符串
    ////    $.getJSON("../handler/AddTeachCourse.ashx", { TeachCourseJson: TeachCourseJsonString }, function (data) {
    ////        alert(data);
    ////    });
    //與AJAX交互，向一般處理程序傳遞json字符串數組，並返回結果
    $.post("../handler/AddTeachCourse.ashx", { TeachCourseJson: TeachCourseJsonString }, function (data) {
        alert(data);
    });

    }

以上有幾個需要注意的地方：

   2.1.轉換JSON串使用

JSON.stringify()

   2.2.JS向一般處理程序傳遞JSON使用

 

//與AJAX交互，向一般處理程序傳遞json字符串數組，並返回結果
   $.post("要使用的一般處理程序路徑", { TeachCourseJson: TeachCourseJsonString }, function (data) {
       alert(data);
   });

3.一般處理程序解析JS傳遞過來的Json數據，並進行解析，寫入DataTable中，然后寫入數據庫

   

<%@ WebHandler Language="C#" Class="AddTeachCourse" %>
/*******************************************************************************
 *文    件：AddTeachCourse.ashx
 *作    者：mzj
 *所屬小組：評教小組
 *文件說明：添加授課信息
 *創建日期：2013年2月6日17:57:01
 *修改作者：
 *修改日期：
 *修改描述：
 *版 本 號：V1.0
 *版本號變更記錄：
********************************************************************************/
using System;
using System.Web;
using System.Collections.Generic;
using System.Linq;
using System.Data;

//json使用命名空間
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;

using Newtonsoft.Json.Converters;

using System.IO;
using System.Text;

using TeachSystem.BLL.TeachingBLL;
using TeachSystem.Entity.TeachingEntity;


public class AddTeachCourse : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";


        //創建一個名為ds_StuTeacherCourse的DataSet
        //(用於存放表：學生、教師、課程關系表，學生、上課班關系表，課程分配上課班關系表)
        DataSet dsStuTeacherCourse = new DataSet("ds_StuTeacherCourse");
        //手動創建的新數據表-學生、教師、課程關系數據表
        DataTable dtAddStudentTeaherCourse = new DataTable("dt_AddStudentTeaherCourse"); //創建一個名為dt_AddStudentTeaherCourse的DataTalbe
        //為dt_AddStudentTeaherCourse表內建立Column（表頭）,添加數據列:StudentID，Indexing，IsAvailable
        dtAddStudentTeaherCourse.Columns.Add(new DataColumn("StudentID", typeof(string)));
        dtAddStudentTeaherCourse.Columns.Add(new DataColumn("Indexing", typeof(int)));
        dtAddStudentTeaherCourse.Columns.Add(new DataColumn("IsAvailable", typeof(string)));

        //手動創建的新數據表-學生、上課班關系數據表
        DataTable dtAddStudentTeachClass = new DataTable("dt_AddStudentTeachClass"); //創建一個名為dt_AddStudentTeachClass的DataTalbe
        //為dt_AddStudentTeachClass表內建立Column（表頭）,添加數據列:StudentID，TeachClassID，IsAvailable
        dtAddStudentTeachClass.Columns.Add(new DataColumn("StudentID", typeof(string)));
        dtAddStudentTeachClass.Columns.Add(new DataColumn("TeachClassID", typeof(string)));
        dtAddStudentTeachClass.Columns.Add(new DataColumn("IsAvailable", typeof(string)));

        //手動創建的新數據表-課程分配、上課班關系數據表
        DataTable dtAddCourseTeachClass = new DataTable("dt_AddCourseTeachClass"); //創建一個名為dt_AddStudentTeachClass的DataTalbe
        //為dt_AddCourseTeachClass表內建立Column（表頭）,添加數據列:TeachClassID，Indexing，IsAvailable
        dtAddCourseTeachClass.Columns.Add(new DataColumn("TeachClassID", typeof(string)));
        dtAddCourseTeachClass.Columns.Add(new DataColumn("Indexing", typeof(int)));
        dtAddCourseTeachClass.Columns.Add(new DataColumn("IsAvailable", typeof(string)));
        dtAddCourseTeachClass.Columns.Add(new DataColumn("OddEven", typeof(string)));
        dtAddCourseTeachClass.Columns.Add(new DataColumn("StuNum",typeof(int)));

        //獲取前台傳遞過來的授課JSON字符串數組
        string ss = context.Request.Form["TeachCourseJson"];
        //反序列化獲取的JSON字符串數組
        JArray javascript = (JArray)JsonConvert.DeserializeObject(ss);
        //依次遍歷反序列化的json字符串數組
        for (int i = 0; i < javascript.Count; i++)
        {
            //將一個個反序列化的JSON字符串數組轉換成對象，並將轉換后的對象的值依次賦給各變量
            JObject obj = (JObject)javascript[i];
            string strTeacherID = obj["TeacherID"].ToString();                 //教師ID
            string strCourseID = obj["CourseID"].ToString();                   //課程ID
            string strTeachClassID = obj["TeachClassID"].ToString();           //上課班ID
            int intIndexing = Convert.ToInt32(obj["Indexing"].ToString());     //課程分配ID
            int intStuNum = Convert.ToInt32(obj["StuNum"].ToString());         //授課學生人數
            string strStudentID = obj["StudentID"].ToString();                 //學生ID

            //添加學生、教師、課程關系信息表的新行
            DataRow drAddStudentTeaherCourse = dtAddStudentTeaherCourse.NewRow();//注意這邊創建dt的新行的方法。指定類型是DataRow而不是TableRow，然后不用new直接的用創建的DataTable下面的NewRow方法。
            //學生、教師、課程關系信息表對應的各列值
            drAddStudentTeaherCourse["StudentID"] = strStudentID;         //學生ID
            drAddStudentTeaherCourse["Indexing"] = intIndexing;           //課程分配ID
            drAddStudentTeaherCourse["IsAvailable"] = "是";
            dtAddStudentTeaherCourse.Rows.Add(drAddStudentTeaherCourse);  //將一整條數據寫入表中

            //添加學生、上課班關系信息表的新行
            DataRow drAddStudentTeachClass = dtAddStudentTeachClass.NewRow();//注意這邊創建dt的新行的方法。指定類型是DataRow而不是TableRow，然后不用new直接的用創建的DataTable下面的NewRow方法。
            //學生、上課班關系信息表對應的各列值
            drAddStudentTeachClass["StudentID"] = strStudentID;             //學生ID
            drAddStudentTeachClass["TeachClassID"] = strTeachClassID;       //上課班ID
            drAddStudentTeachClass["IsAvailable"] = "是";
            dtAddStudentTeachClass.Rows.Add(drAddStudentTeachClass);  //將一整條數據寫入表中

        }


            JObject objs = (JObject)javascript[0];

            string strTeachClassIDs = objs["TeachClassID"].ToString();
            int intIndexings = Convert.ToInt32(objs["Indexing"].ToString());
            int intStuNums = Convert.ToInt32(objs["StuNum"].ToString());


           //添加課程分配、上課班關系信息表的新行
            DataRow drAddCourseTeachClass = 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中:
        dsStuTeacherCourse.Tables.Add(dtAddStudentTeaherCourse);
        dsStuTeacherCourse.Tables.Add(dtAddStudentTeachClass);
        dsStuTeacherCourse.Tables.Add(dtAddCourseTeachClass);

        //將DataSet中數據表導入數據庫
        Boolean flagImportStuTeacherCourse = new TeachCourseBLL().ImportStudentTeacherCourse(dsStuTeacherCourse);
        //JsonReader reader = new JsonReader(new StringReader(jsonText))

        //string s = context.Request.Form["TeachCourseJson"];
        context.Response.Write(flagImportStuTeacherCourse);
        context.Response.End();



    }


    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

一般處理程序代碼，需要注意幾點:

   3.1 獲取前台傳遞過來的JSON字符串數組

 

//獲取前台傳遞過來的授課JSON字符串數組
       string ss = context.Request.Form["TeachCourseJson"];

   3.2 反序列化前台傳來的JSON字符才能換數組

 

//反序列化獲取的JSON字符串數組
      JArray javascript = (JArray)JsonConvert.DeserializeObject(ss);

    3.3自定義Dataset，並建立各數據表，將前台傳來的數據寫入DataTable表

創建Dataset及數據表

 

//創建一個名為ds_StuTeacherCourse的DataSet
      //(用於存放表：學生、教師、課程關系表，學生、上課班關系表，課程分配上課班關系表)
      DataSet dsStuTeacherCourse = new DataSet("ds_StuTeacherCourse");
      //手動創建的新數據表-學生、教師、課程關系數據表
      DataTable dtAddStudentTeaherCourse = new DataTable("dt_AddStudentTeaherCourse"); //創建一個名為dt_AddStudentTeaherCourse的DataTalbe
      //為dt_AddStudentTeaherCourse表內建立Column（表頭）,添加數據列:StudentID，Indexing，IsAvailable
      dtAddStudentTeaherCourse.Columns.Add(new DataColumn("StudentID", typeof(string)));
      dtAddStudentTeaherCourse.Columns.Add(new DataColumn("Indexing", typeof(int)));
      dtAddStudentTeaherCourse.Columns.Add(new DataColumn("IsAvailable", typeof(string)));

      //手動創建的新數據表-學生、上課班關系數據表
      DataTable dtAddStudentTeachClass = new DataTable("dt_AddStudentTeachClass"); //創建一個名為dt_AddStudentTeachClass的DataTalbe
      //為dt_AddStudentTeachClass表內建立Column（表頭）,添加數據列:StudentID，TeachClassID，IsAvailable
      dtAddStudentTeachClass.Columns.Add(new DataColumn("StudentID", typeof(string)));
      dtAddStudentTeachClass.Columns.Add(new DataColumn("TeachClassID", typeof(string)));
      dtAddStudentTeachClass.Columns.Add(new DataColumn("IsAvailable", typeof(string)));

      //手動創建的新數據表-課程分配、上課班關系數據表
      DataTable dtAddCourseTeachClass = new DataTable("dt_AddCourseTeachClass"); //創建一個名為dt_AddStudentTeachClass的DataTalbe
      //為dt_AddCourseTeachClass表內建立Column（表頭）,添加數據列:TeachClassID，Indexing，IsAvailable
      dtAddCourseTeachClass.Columns.Add(new DataColumn("TeachClassID", typeof(string)));
      dtAddCourseTeachClass.Columns.Add(new DataColumn("Indexing", typeof(int)));
      dtAddCourseTeachClass.Columns.Add(new DataColumn("IsAvailable", typeof(string)));
      dtAddCourseTeachClass.Columns.Add(new DataColumn("OddEven", typeof(string)));
      dtAddCourseTeachClass.Columns.Add(new DataColumn("StuNum",typeof(int)));

向數據表填充數據，例如

 

//添加課程分配、上課班關系信息表的新行
          DataRow drAddCourseTeachClass = 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

 

//將各表加入DataSet中:
       dsStuTeacherCourse.Tables.Add(dtAddStudentTeaherCourse);
       dsStuTeacherCourse.Tables.Add(dtAddStudentTeachClass);
       dsStuTeacherCourse.Tables.Add(dtAddCourseTeachClass);

    3.4將DataSet中各數據表寫入數據庫

 

//將DataSet中數據表導入數據庫
       Boolean flagImportStuTeacherCourse = new TeachCourseBLL().ImportStudentTeacherCourse(dsStuTeacherCourse);