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

 

  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);  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM