日期:2014-05-16  浏览次数:20918 次

《项目经验》--通过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=&qu