从数据库取出js代码如何让他显示js代码

通过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 = documentgetElementById("ddlTeachClass");
var TeachClassID = strTeachClassIDoptions[strTeachClassIDselectedIndex]value; //得到ID
//取得课程分配的ID（Indexing）
var Indexing = $("#hidFieldSaveIndexing")val();
//取得学生数量
var stuNum = $("#txtStuNum")val();
//取得listbox框ID
var listStudent = documentgetElementById("lsboxStudent");
//取得listbox框中元素长度
var lstStuLength = listStudentoptionslength;
// var objJsons="";
// var StuArrayObj = new Array(); //创建一个数组,存储学生ID
// StuArrayObj[i] = StudentID; //向数组中添加学生ID
//以下是：转换json对象的过程//
var StuArrayObjs = []; //定义一个空串
for (var i = 0; i < lstStuLength; i++) {
var StudentID = listStudentoptions[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
StuArrayObjspush(StuArrayObj);
}
var TeachCourseJsonString = JSONstringify(StuArrayObjs); // JSONstringify() 转换为json串
// var TeachCourseJson = eval("(" + TeachCourseJsonString + ")"); //转换为json对象
// alert(TeachCourseJson[1]TeacherID);
//下面$getJSON 可以传递成功，只是这样传递不能传递过长字符串
//// $getJSON("/handler/AddTeachCourseashx", { TeachCourseJson: TeachCourseJsonString }, function (data) {
//// alert(data);
//// });
//与AJAX交互，向一般处理程序传递json字符串数组，并返回结果
$post("/handler/AddTeachCourseashx", { TeachCourseJson: TeachCourseJsonString }, function (data) {
alert(data);
});
}
以上有几个需要注意的地方：
21转换JSON串使用
JSONstringify()
22JS向一般处理程序传递JSON使用
//与AJAX交互，向一般处理程序传递json字符串数组，并返回结果
$post("要使用的一般处理程序路径", { TeachCourseJson: TeachCourseJsonString }, function (data) {
alert(data);
});
3一般处理程序解析JS传递过来的Json数据，并进行解析，写入DataTable中，然后写入数据库
<%@ WebHandler Language="C#" Class="AddTeachCourse" %>
/
文 件：AddTeachCourseashx
作 者：mzj
所属小组：评教小组
文件说明：添加授课信息
创建日期：2013年2月6日17:57:01
修改作者：
修改日期：
修改描述：
版 本 号：V10
版本号变更记录：
/
using System;
using SystemWeb;
using SystemCollectionsGeneric;
using SystemLinq;
using SystemData;
//json使用命名空间
using NewtonsoftJson;
using NewtonsoftJsonLinq;
using NewtonsoftJsonConverters;
using SystemIO;
using SystemText;
using TeachSystemBLLTeachingBLL;
using TeachSystemEntityTeachingEntity;
public class AddTeachCourse : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
contextResponseContentType = "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
dtAddStudentTeaherCourseColumnsAdd(new DataColumn("StudentID", typeof(string)));
dtAddStudentTeaherCourseColumnsAdd(new DataColumn("Indexing", typeof(int)));
dtAddStudentTeaherCourseColumnsAdd(new DataColumn("IsAvailable", typeof(string)));
//手动创建的新数据表-学生、上课班关系数据表
DataTable dtAddStudentTeachClass = new DataTable("dt_AddStudentTeachClass"); //创建一个名为dt_AddStudentTeachClass的DataTalbe
//为dt_AddStudentTeachClass表内建立Column（表头）,添加数据列:StudentID，TeachClassID，IsAvailable
dtAddStudentTeachClassColumnsAdd(new DataColumn("StudentID", typeof(string)));
dtAddStudentTeachClassColumnsAdd(new DataColumn("TeachClassID", typeof(string)));
dtAddStudentTeachClassColumnsAdd(new DataColumn("IsAvailable", typeof(string)));
//手动创建的新数据表-课程分配、上课班关系数据表
DataTable dtAddCourseTeachClass = new DataTable("dt_AddCourseTeachClass"); //创建一个名为dt_AddStudentTeachClass的DataTalbe
//为dt_AddCourseTeachClass表内建立Column（表头）,添加数据列:TeachClassID，Indexing，IsAvailable
dtAddCourseTeachClassColumnsAdd(new DataColumn("TeachClassID", typeof(string)));
dtAddCourseTeachClassColumnsAdd(new DataColumn("Indexing", typeof(int)));
dtAddCourseTeachClassColumnsAdd(new DataColumn("IsAvailable", typeof(string)));
dtAddCourseTeachClassColumnsAdd(new DataColumn("OddEven", typeof(string)));
dtAddCourseTeachClassColumnsAdd(new DataColumn("StuNum",typeof(int)));
//获取前台传递过来的授课JSON字符串数组
string ss = contextRequestForm["TeachCourseJson"];
//反序列化获取的JSON字符串数组
JArray javascript = (JArray)JsonConvertDeserializeObject(ss);
//依次遍历反序列化的json字符串数组
for (int i = 0; i < javascriptCount; 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 = ConvertToInt32(obj["Indexing"]ToString()); //课程分配ID
int intStuNum = ConvertToInt32(obj["StuNum"]ToString()); //授课学生人数
string strStudentID = obj["StudentID"]ToString(); //学生ID
//添加学生、教师、课程关系信息表的新行
DataRow drAddStudentTeaherCourse = dtAddStudentTeaherCourseNewRow();//注意这边创建dt的新行的方法。指定类型是DataRow而不是TableRow，然后不用new直接的用创建的DataTable下面的NewRow方法。
//学生、教师、课程关系信息表对应的各列值
drAddStudentTeaherCourse["StudentID"] = strStudentID; //学生ID
drAddStudentTeaherCourse["Indexing"] = intIndexing; //课程分配ID
drAddStudentTeaherCourse["IsAvailable"] = "是";
dtAddStudentTeaherCourseRowsAdd(drAddStudentTeaherCourse); //将一整条数据写入表中
//添加学生、上课班关系信息表的新行
DataRow drAddStudentTeachClass = dtAddStudentTeachClassNewRow();//注意这边创建dt的新行的方法。指定类型是DataRow而不是TableRow，然后不用new直接的用创建的DataTable下面的NewRow方法。
//学生、上课班关系信息表对应的各列值
drAddStudentTeachClass["StudentID"] = strStudentID; //学生ID
drAddStudentTeachClass["TeachClassID"] = strTeachClassID; //上课班ID
drAddStudentTeachClass["IsAvailable"] = "是";
dtAddStudentTeachClassRowsAdd(drAddStudentTeachClass); //将一整条数据写入表中
}
JObject objs = (JObject)javascript[0];
string strTeachClassIDs = objs["TeachClassID"]ToString();
int intIndexings = ConvertToInt32(objs["Indexing"]ToString());
int intStuNums = ConvertToInt32(objs["StuNum"]ToString());
//添加课程分配、上课班关系信息表的新行
DataRow drAddCourseTeachClass = dtAddCourseTeachClassNewRow();//注意这边创建dt的新行的方法。指定类型是DataRow而不是TableRow，然后不用new直接的用创建的DataTable下面的NewRow方法。
//课程分配、上课班关系信息表对应的各列值
drAddCourseTeachClass["TeachClassID"] = strTeachClassIDs;
drAddCourseTeachClass["Indexing"] = intIndexings;
drAddCourseTeachClass["IsAvailable"] = "是";
drAddCourseTeachClass["OddEven"] = null;
drAddCourseTeachClass["StuNum"] = intStuNums;
dtAddCourseTeachClassRowsAdd(drAddCourseTeachClass); //将一整条数据写入表中
//将各表加入DataSet中:
dsStuTeacherCourseTablesAdd(dtAddStudentTeaherCourse);
dsStuTeacherCourseTablesAdd(dtAddStudentTeachClass);
dsStuTeacherCourseTablesAdd(dtAddCourseTeachClass);
//将DataSet中数据表导入数据库
Boolean flagImportStuTeacherCourse = new TeachCourseBLL()ImportStudentTeacherCourse(dsStuTeacherCourse);
//JsonReader reader = new JsonReader(new StringReader(jsonText))
//string s = contextRequestForm["TeachCourseJson"];
contextResponseWrite(flagImportStuTeacherCourse);
contextResponseEnd();
}
public bool IsReusable
{
get
{
return false;
}
}
}
一般处理程序代码，需要注意几点:
31 获取前台传递过来的JSON字符串数组
//获取前台传递过来的授课JSON字符串数组
string ss = contextRequestForm["TeachCourseJson"];
32 反序列化前台传来的JSON字符才能换数组
//反序列化获取的JSON字符串数组
JArray javascript = (JArray)JsonConvertDeserializeObject(ss);
33自定义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
dtAddStudentTeaherCourseColumnsAdd(new DataColumn("StudentID", typeof(string)));
dtAddStudentTeaherCourseColumnsAdd(new DataColumn("Indexing", typeof(int)));
dtAddStudentTeaherCourseColumnsAdd(new DataColumn("IsAvailable", typeof(string)));
//手动创建的新数据表-学生、上课班关系数据表
DataTable dtAddStudentTeachClass = new DataTable("dt_AddStudentTeachClass"); //创建一个名为dt_AddStudentTeachClass的DataTalbe
//为dt_AddStudentTeachClass表内建立Column（表头）,添加数据列:StudentID，TeachClassID，IsAvailable
dtAddStudentTeachClassColumnsAdd(new DataColumn("StudentID", typeof(string)));
dtAddStudentTeachClassColumnsAdd(new DataColumn("TeachClassID", typeof(string)));
dtAddStudentTeachClassColumnsAdd(new DataColumn("IsAvailable", typeof(string)));
//手动创建的新数据表-课程分配、上课班关系数据表
DataTable dtAddCourseTeachClass = new DataTable("dt_AddCourseTeachClass"); //创建一个名为dt_AddStudentTeachClass的DataTalbe
//为dt_AddCourseTeachClass表内建立Column（表头）,添加数据列:TeachClassID，Indexing，IsAvailable
dtAddCourseTeachClassColumnsAdd(new DataColumn("TeachClassID", typeof(string)));
dtAddCourseTeachClassColumnsAdd(new DataColumn("Indexing", typeof(int)));
dtAddCourseTeachClassColumnsAdd(new DataColumn("IsAvailable", typeof(string)));
dtAddCourseTeachClassColumnsAdd(new DataColumn("OddEven", typeof(string)));
dtAddCourseTeachClassColumnsAdd(new DataColumn("StuNum",typeof(int)));
向数据表填充数据，例如
//添加课程分配、上课班关系信息表的新行
DataRow drAddCourseTeachClass = dtAddCourseTeachClassNewRow();//注意这边创建dt的新行的方法。指定类型是DataRow而不是TableRow，然后不用new直接的用创建的DataTable下面的NewRow方法。
//课程分配、上课班关系信息表对应的各列值
drAddCourseTeachClass["TeachClassID"] = strTeachClassIDs;
drAddCourseTeachClass["Indexing"] = intIndexings;
drAddCourseTeachClass["IsAvailable"] = "是";
drAddCourseTeachClass["OddEven"] = null;
drAddCourseTeachClass["StuNum"] = intStuNums;
dtAddCourseTeachClassRowsAdd(drAddCourseTeachClass); //将一整条数据写入表中
将各数据表存入DataSet
//将各表加入DataSet中:
dsStuTeacherCourseTablesAdd(dtAddStudentTeaherCourse);
dsStuTeacherCourseTablesAdd(dtAddStudentTeachClass);
dsStuTeacherCourseTablesAdd(dtAddCourseTeachClass);
34将DataSet中各数据表写入数据库
//将DataSet中数据表导入数据库
Boolean flagImportStuTeacherCourse = new TeachCourseBLL()ImportStudentTeacherCourse(dsStuTeacherCourse);
通过js获取前台数据向一般处理程序传递Json数据，并解析Json数据，将前台传来的Json数据写入数据

以上就是关于从数据库取出js代码如何让他显示js代码全部的内容，包括:从数据库取出js代码如何让他显示js代码、、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！