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

[马兆娟]

此帖子内容是我做项目时用到，自己琢磨出来的，可能还有很多纰漏之处，在此分享！互相交流，互相学习，有不对的地方，欢迎大家指正！
具体内容见博客《 《项目经验》--通过js获取前台数据向一般处理程序传递Json数据，并解析Json数据，将前台传来的Json数据写入数据库表中》：http://blog.csdn.net/mazhaojuan/article/details/8592015

先看一下我要实现的功能界面：

这个界面的功能在图中已有展现，课程分配（教师教授哪门课程）在之前的页面中已做好。这个页面主要实现的是授课，即给老师教授的课程分配学生。此页面实现功能的步骤已在页面中有所体现，这里不再赘述，此篇文章主要介绍:我是如何通过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?
<!--添加各项列表-->
<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获取前台授课数据，并向后台一般处理程序传递
[javascript] view plaincopyprint?
//*******************************************授课点击事件******************************************//
//添加授课信息
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串使用
[javascript] view plaincopyprint?
JSON.stringify()
2.2.JS向一般处理程序传递JSON使用
[javascript] view plaincopyprint?
//与AJAX交互，向一般处理程序传递json字符串数组，并返回结果
$.post("要使用的一般处理程序路径", { TeachCourseJson: TeachCourseJsonString }, function (data) {
alert(data);
});

[马兆娟]

引用 129 楼 Scorip 的回复:

引用 125 楼 mazhaojuan 的回复:引用 122 楼 Scorip 的回复:引用 121 楼 Scorip 的回复:JavaScript code?1234.......以上省略 //取得学生数量 var stuNum = $("#txtStuNum").val(); .......以下省略 个人理解并说明一下： 在 JS 中获取客户端……

您是尊称而已……

[大渣吼吾系渣渣辉]

引用 132 楼 mazhaojuan 的回复:

引用 131 楼 lizeyuan8238386 的回复:这不是可不可以的问题，是傻不傻的问题 你是不是觉得自己很精呢，那你真是精品……

引用 125 楼 mazhaojuan 的回复:

也只有这样才让我相信，女生也能在软件业撑起自己的一片天

呵呵，首先你太过气性了，我是针对帖子内容本身，有没对你个人 其次，你是妹子，我咋没发现呢

[大渣吼吾系渣渣辉]

是妹子 怎么不早说

[Scorip]

引用 125 楼 mazhaojuan 的回复:

引用 122 楼 Scorip 的回复:引用 121 楼 Scorip 的回复:JavaScript code?1234.......以上省略 //取得学生数量 var stuNum = $("#txtStuNum").val(); .......以下省略 个人理解并说明一下： 在 JS 中获取客户端的控件句柄的时候，需要用到 客户端控件ID.Cl……

、、、、、、早安，我说了我才21岁。。。别您啊您的。。。。

[GLF]

楼主你太高调了。话说大学时期刚学会玩拳皇，学会个↓←和↓→就以为很NB，于是在寝室找这个单挑，找那个单挑。还高呼打遍寝室无敌手.....

[大渣吼吾系渣渣辉]

这不是可不可以的问题，是傻不傻的问题

[qwertyuiop5454312321]

e 有意思吗？？？什么情况嘛

[ssl329]

确实是最基本的异步交互,真没必要发出来,在自己博客保留就可以了,占用资源

[马兆娟]

引用 137 楼 ssl329 的回复:

确实是最基本的异步交互,真没必要发出来,在自己博客保留就可以了,占用资源

这只是你的一己之见，分享是我的事，没必要向您请教能否分享吧……

[犇犇熊]

其实这个直接发博客就行了，发帖就没必要了

[ltcszk]

这都能推荐，csdn真是越来越垃圾了

[ktei2008]

引用 51 楼 wanghui0380 的回复:

呵呵，打击？你们从那里看出打击了呢？ 从头看开始一个回复就是，木有问题。自己当日志记录一下就ok，不建议如此公开。因为这代码本身没有什么值得公开的价值，不值得公开去误导后面的人，而且我可以说，3个月后lz自己再会来看看你公开的这东西，也只会笑而不语，奇怪当初自己这代码写滴怎么还可以如此公开了

首先，我同意你的观点：LZ的代码确实惨不忍睹。但是注册用户都有发贴的权利。发与不发，碍你何事呢？

[吉普赛的歌]

马老师，　您好。　请问您的贴子被推荐有何看法呢？

[gongjie416]

是有点复杂了,不过都是慢慢进步的吗!支持下!就是眼睛有点花

[gy_zyh]

写得很好，我正在学习这方面的东东，谢谢楼主，我就需要看代码，怎么了，我不觉得累，怎么了，我学习人家经验不一定照搬别人经验，所畏的大师们不要显摆了，还真把自己看成大师了。鄙视这类人。

[peng2739956]

大致看了下 太多冗余代码 完全可以精简，写出你那个效果绝对不需要这么多代码的。自己可以去尝试精简下代码。我想楼主应该适合去看看《编程之道》

[营养0快现]

引用 6 楼 wanghui0380的回复:

不反对分享，但分享要有意义，由于网络爬虫和采集器和搜索引擎的影响，一遍文章至少会在网络上流传3年，假设你的文章在3年以后还能对人有意义，那就是好文章。但是就你自己这文章，就你自己的3个月后来看，也会觉着木啥意义，这种对于玩意还要持续影响后面3年的人，这就不好了 俺们搞技术的一般不用百度搜索，为啥子呢？因为你用百度搜，能搜到最大可能就是博客园上那些作者写玩后3个月，连作者自己也觉着木啥意思，却在网络上流传了n年，还在百度首页摆着。 还是少点这样的分享，让真正有意义的文章能上百度把，免得俺们每次找点东西还得爬墙出去google

[营养0快现]

引用 6 楼 wanghui0380的回复:

不反对分享，但分享要有意义，由于网络爬虫和采集器和搜索引擎的影响，一遍文章至少会在网络上流传3年，假设你的文章在3年以后还能对人有意义，那就是好文章。但是就你自己这文章，就你自己的3个月后来看，也会觉着木啥意义，这种对于玩意还要持续影响后面3年的人，这就不好了 俺们搞技术的一般不用百度搜索，为啥子呢？因为你用百度搜，能搜到最大可能就是博客园上那些作者写玩后3个月，连作者自己也觉着木啥意思，却在网络上流传了n年，还在百度首页摆着。 还是少点这样的分享，让真正有意义的文章能上百度把，免得俺们每次找点东西还得爬墙出去google

我觉得她写的很好啊！你自己会了就会，得瑟的毛？我为这个问题搞了好几天，今天看到她写的，觉得很不错！别说这些很水，搞得你很牛逼一样！你妈当初生你出来还不是巴掌大！

[营养0快现]

引用 146 楼 peng2739956的回复:

大致看了下 太多冗余代码 完全可以精简，写出你那个效果绝对不需要这么多代码的。自己可以去尝试精简下代码。我想楼主应该适合去看看《编程之道》

真是的，我觉得她写的不错啊！一个帖子回复这么多！你不累吗？真是日狗了

[这个还能被注册？]

为了楼主的耐心也值得顶一下啦~~~