【项目经验】DataTable与JSON之间的转换

简介:

【项目需求】

    问卷调查的制作学生端已经完成了,下一步要做的便是后台对问卷结果的管理。通过和老师的沟通,了
解到老师想要的结果是按专业查询的结果,而其中包括两门课程。所以,接下来的工作便很明确了。
【项目设计】

    对问卷结果的回收内容明确之后,第一项工作便是页面的设计。如下:


    在导航栏新增对此次问卷调查的菜单,其下包括三个子菜单,也就是本次问卷包含的三种题型,分开查询。每个页面,通过课程与专业的选择,进行问卷结果的查询。

【项目开发】
    本次项目开发的具体步骤不一一写下来了,思路是一致的。即前台页面通过已有的课程名和专业名去数 据库进行查询,查询的结果用的是DataTable盛放的,而前台能够接收到的数据类型应该是Json格式的, 最后在前台显示的还是Table。这么一说,好像很糊涂,那么就看看下面的一张图:

【代码实现】
    下面,跟着上面的一条线,看看部分关键代码。
   (1)D层,写的是一个根据课程名称和专业名称查询对应的问卷结果:
        /// <summary>
        /// 根据专业课程查询单选结果——胡志婷——2016年1月8日09:32:03
        /// </summary>
        /// <param name="courseName">课程信息</param>
        /// <param name="majorName">专业信息</param>
        /// <returns>DataTable</returns>
        public DataTable QuerySingleAnswerBymajorName(string courseName,string majorName)
        {
            //按对应的课程专业查询单选题下学生的选项及各个选项所选的人数
            string sql = "select singleAnswer,singleChoiceContext,singleOptionContext,count(singleAnswer) as count from V_SingleAnswerInfo where majorName=@majorName and courseName=@courseName and singleAnswer=singleOptionID Group by singleAnswer,singleChoiceContext,singleOptionContext order by singleChoiceContext";
            //参数,课程和专业信息
            SqlParameter[] para=new SqlParameter[]{
                new SqlParameter("@majorName",majorName.Trim()),
                new SqlParameter("@courseName",courseName.Trim())
            };
            //执行带参数查询的方法
            DataTable dt =sqlHelper .ExecuteQuery(sql,para,CommandType.Text);
            //返回查询结果
            return dt;
        }
    (2)B层,将D层查询到的结果返回。
	/// <summary>
        /// 根据专业课程查询单选结果——胡志婷——2<span style="font-family: 楷体; widows: auto;">016年1月8日</span><span style="widows: auto; font-family: 楷体;">09:29:53</span>
        /// </summary>
        /// <param name="courseName">课程信息</param>
        /// <param name="majorName">专业信息</param>
        /// <returns>DataTable</returns>
        public DataTable QuerySingleAnswerBymajorName(string courseName, string majorName)
        {
            //声明表对象
            DataTable dt = new DataTable();
            //执行查询
            dt = new SingleDAL().QuerySingleAnswerBymajorName(courseName, majorName);
            //返回结果
            return dt;
        }
   (3)一般处理程序,将DataTable转换为Json字符串。
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //问卷单选答案实体
            SingleAnswerEntity singleanswerentity = new SingleAnswerEntity();
            //课程信息
            singleanswerentity.CourseName = context.Request.QueryString["courseName"].ToString();
            //专业信息
            singleanswerentity.MajorName=context.Request.QueryString["majorName"].ToString();
            //根据专业课程查询单选信息答案方法
            DataTable dtSingleAnswer = new StaticticalTeacherScoresBLL().QuerySingleAnswerBymajorName(singleanswerentity.CourseName, singleanswerentity.MajorName);
            //实例化DataTable与JSON间转换的业务逻辑类
            DatatableAndJsonBLL datatableAndJsonBLL = new DatatableAndJsonBLL();
            //调用DataTable转换为JSON方法
            string strJSON = datatableAndJsonBLL.DataTable2Json(dtSingleAnswer);
            context.Response.Write(strJSON);
        }
     (4)DataTableAndJsonBLL业务逻辑层下的DataTableToJson方法。
      /// <summary>
      /// 将DataTable数据转换为Json字符串——胡志婷——2016年1月6日14:29:10
      /// </summary>
      /// <param name="dt">DataTable</param>
      /// <returns>JSON string</returns>
      public string DataTableToJson(DataTable dt)
      {
         //实例化一个可变的字符序列
          StringBuilder jsonBuilder = new StringBuilder(); 
         //开始给字符序列附加字符     
          jsonBuilder.Append("[");
          for (int i = 0; i < dt.Rows.Count; i++)
          {
              jsonBuilder.Append("{");
              for (int j = 0; j < dt.Columns.Count; j++)
              {
                  jsonBuilder.Append("\"");
                  jsonBuilder.Append(dt.Columns[j].ColumnName);
                  jsonBuilder.Append("\":\"");
                  jsonBuilder.Append(dt.Rows[i][j].ToString());
                  jsonBuilder.Append("\",");
              }
              jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
              jsonBuilder.Append("},");
          }
          jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
          jsonBuilder.Append("]");
          return jsonBuilder.ToString();
      }  
     (5)AJAX将接收到的JSON字符串进行处理
        <script type="text/javascript">
        //查询单选题答案——胡志婷——2016年1月8日09:49:55
        function QuerySingleAnswer()
        {
            var courseName = document.getElementById("dropCourse").value; 
            var majorName = document.getElementById("dropCollege").value; 
            if (courseName == "" || majorName == "") {
                alert("请先选择信息!");
                return null;
            }
            $.ajax({
                type:"GET",
                //执行一般处理程序下的方法
                url:"handler/QuerySingleAnswer.ashx?courseName=" + courseName +  "&majorName=" + majorName,
                success: function (strJSON) {               
                    while (strJSON.indexOf("\r\n") >= 0)
                        strJSON = strJSON.replace("\r\n", "\\r\\n");
                    //将JSON字符串转换为JSON对象
                    var obj = eval(strJSON);
                    $("#suggestionTable tr").eq(1).removeClass("contentDisplay"); //移除模板行的样式
                    $("#suggestionTable tr").eq(1).nextAll().remove();        //将标题行的tr删除 这里指的是删除第二个tr
                    //依次遍历获得的json数据,向数据表table中动态加载数据
                    for (var i = 0; i < obj.length; i++) {
                        // clone() 方法生成被选元素的副本,包含子节点、文本和属性。
                        var row = $("#content").clone();
                        //单选题内容
                        row.find("#SingleFirst").text(obj[i].singleChoiceContext);
                        row.find("#SingleSecond").text(obj[i].singleOptionContext);
                        row.find("#SingleThird").text(obj[i].count);
                        //将新行添加到建议表中
                        row.appendTo("#suggestionTable");
                    }
                    //添加模板列的css样式
                    $("#suggestionTable tr").eq(1).addClass("contentDisplay");              
                },
                //返回数据失败,弹出错误显示
                error: function (XmlHttpRequest, textStatus, errorThrown)                   {
                    alert(XmlHttpRequest.responseText);
                  }
            });
            return false;
        }
       
    </script>
   (6)最后,我们在前台就可以看到查询到的结果了。
    
【项目总结】
     其实, 我们不仅仅可以将DataTable转换为JSON返回到前台,同样也可以将JSON转换 为DataTable存储到后台,在这里就不贴代码了。 
     一直以来,项目中的实现都是在已有的模板代码下进行实践的,所以对于代码的理解,对于思路的理解,自己并没有好好理会过。所处的状态好像是,虽然功能实现了,但具体的逻辑或者实现过程自己并没有做到心中有数吧。
      通过这一次的维护实践,才让我接触到了DataTable与JSON之间的转换,这好像让自己恍然大悟,有时间可以把各种项目的代码都好好看看,对于代码的理解也是需要慢慢培养和积累的。
   

目录
相关文章
|
4月前
|
JavaScript
Vue 项目使用 json-editor (二)
Vue 项目使用 json-editor (二)
224 0
|
11月前
|
XML JSON JavaScript
【前端】Vue项目中 JSON 编辑器的使用
【前端】Vue项目中 JSON 编辑器的使用
1658 0
|
11月前
|
JavaScript
Angular 项目中 angular.json builder 字段的可选项介绍
Angular 项目中 angular.json builder 字段的可选项介绍
|
27天前
|
XML JSON Java
使用IDEA+Maven搭建整合一个Struts2+Spring4+Hibernate4项目,混合使用传统Xml与@注解,返回JSP视图或JSON数据,快来给你的SSH老项目翻新一下吧
本文介绍了如何使用IntelliJ IDEA和Maven搭建一个整合了Struts2、Spring4、Hibernate4的J2EE项目,并配置了项目目录结构、web.xml、welcome.jsp以及多个JSP页面,用于刷新和学习传统的SSH框架。
29 0
使用IDEA+Maven搭建整合一个Struts2+Spring4+Hibernate4项目,混合使用传统Xml与@注解,返回JSP视图或JSON数据,快来给你的SSH老项目翻新一下吧
|
28天前
|
JSON JavaScript 前端开发
Vue项目使用Cookie,以Json格式存入与读取Cookie,设置过期时间以及删除操作
这篇文章介绍了在Vue项目中如何使用JavaScript操作Cookie,包括设置、读取、设置过期时间以及删除Cookie的方法。
85 0
|
2月前
|
JavaScript
vue项目中package.json的个人见解
总的来说,package.json文件是Vue项目的心脏,它记录了项目运行所需的所有信息,是项目能够顺利运行和维护的关键。
29 0
|
4月前
|
前端开发
【专栏】在前端开发中,package.json 文件是项目的重要配置文件,其中包含了许多与项目相关的信息和设置
【4月更文挑战第29天】`package.json`的`proxy`字段用于配置开发环境中的代理服务器,解决跨域问题并模拟后端响应。它是字符串类型,值为代理服务器地址。主要应用场景包括前端跨域请求和本地调试。配置时在`package.json`顶层添加`proxy`字段,如`"proxy": "http://localhost:8080"`。该配置仅在开发环境中生效,生产环境需另寻解决方案。
71 1
|
4月前
|
XML JSON 开发框架
基于 OData 模型和 JSON 模型的 UI5 表格控件行项目的添加和删除实现
基于 OData 模型和 JSON 模型的 UI5 表格控件行项目的添加和删除实现
|
4月前
|
JavaScript 前端开发 开发者
Angular 项目里 tsconfig.schematics.json 文件的作用
Angular 项目里 tsconfig.schematics.json 文件的作用
|
4月前
|
JSON 开发框架 前端开发
动手实现基于 JSON 和 OData 两种数据模型的 Web 应用表格控件行项目的添加和删除
动手实现基于 JSON 和 OData 两种数据模型的 Web 应用表格控件行项目的添加和删除

热门文章

最新文章