【项目积累】对JSON数据的处理

简介: <p><span style="font-family:楷体; font-family:楷体; font-size:19px; line-height:27px; widows:auto">   <strong>【项目简述】</strong></span><strong><span style="font-family:楷体; font-family:楷体; font-size:19px;

   【项目简述】    

     接触.NET项目很长一段时间了,前台用的都是MVC框架。不知道大家是否想过一个问题,我们是如何将数据显示到前台的,换句话说,MVC可以识别怎么样的数据形式?答案很简单,就是JSON数据。不太记得的,不妨找段代码看看,我们需要将数据显示到前台,一定会返回JSON类型的数据。

    【博客概要】
    目前为止,JSON的应用我们都不陌生了。但对于JSON的一些理论知识,你真正知道吗?或者说,你在项目调试的时候,曾经有在前台alert过一个JSON串吗?有看过JSON串的内容是什么吗?下面我将带着大家回顾一下JSON的理论知识,再以我在项目中遇到的问题为例,说说我对JSON数据所做的一些处理。

    【JSON 学习】
    一.概述
     JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文
本格式,是理想的数据交换格式。同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。
    在JSON中,有两种结构:对象和数组。
     1.对象
    一个对象以“{”开始,“}”结束。每个“key”后跟一“:”,“‘key/value’ 对”之间运用 “,”分隔。
    packJson = {"name":"nikita", "password":"1111"}
     2.数组
    packJson = [{"name":"nikita", "password":"1111"}, {"name":"tony", "password":"2222"}];
    数组是值的有序集合。一个数组以“[”开始,“]”结束。值之间运用 “,”分隔。

    二、JSON对象和JSON字符串的转换
 
    在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。我在项目中就需要做这样的处理。例如:  
     JSON字符串:
          var jsonStr = '{"name":"nikita", "password":"1111"}';
   JSON对象:
          var jsonObj = {"name":"nikita", "password":"1111"};
    2、String转换为Json
          var myObject = eval('(' + myJSONtext + ')');
          eval是js自带的函数,不是很安全,可以考虑用json包。
   【项目实战】

   一.JSON数据与 EasyUI datagrid的绑定
        
在考评系统中,需要对音频图片文件进行管理,第一点要做的就是在前台显示所有的文件列表,已对其进行查询和删除操作。
        通过AJAX,我已经获取到了所有文件的JSON串,如下图所示:
     
 在上面也提到过,JS操作的是JSON对象,所以原本以为只需要将其转换为JSON对象即可。但实际上,并没有成功地绑定到datagrid上。
         后来在网上查到资料,才发现EasyUI datagrid与JSON数据的绑定其实是有固定的参数的,正确格式应该是{"total":total,"rows":jsondata}.
          这样与EasyUI datagrid数据绑定问题就解决了。部分代码如下:
         前台HTML:
<div style="margin-top:20px;">
<table class="easyui-datagrid" id="fileList" style="width:500px;height:500px;" data-option="url:'/MongodbHelp/ProcessRequest'", fitColumns:true >
    <thead>
        <tr>
            <th data-options="field:'cn',width:30, checkbox:'true'"></th>
            <th data-options="field:'name',width:160,align:'center'">文件名</th>
            <th data-options="field:'size',width:160,align:'center'">文件大小</th>
            <th data-options="field:'lastModify',width:220,align:'center'">最近更新时间</th>
        </tr>
    </thead>
</table>
</div>
JS方法,绑定数据:
////获取文件列表
           function getFiles() {
             
               $.ajax({
                   type: 'POST',
                   url: '/MongodbHelp/ProcessRequest',
                   data: { action: "LIST", value: null, dateStart: null, dateEnd: null },
                   success: function (data) {
                       
                       //alert(data);
                       var jsondata = JSON.parse(data);
                   
                       //alert(jsondata);
                       var datasource = { total: 6, rows: jsondata }
                       //alert(datasource);
                       
                       $('#fileList').datagrid('loadData', datasource);
                   },
                   error: function (err) {
                       alert("error!");
                   }
               });
           }; 
二.JSON数据的字符转义处理         
         在MVC的Controller中,将DataTable转换为了JSON数据想要显示在前台,但获取到JSON数据并不是想象中的那么完美。
         在Controller中写的将DataTable转换为JSON,并存储到Session中的方法:
//得到已经插入的DataTable数据
            DataTable successDt = dicDt[0]; 
            DataTableToJson dtjson = new DataTableToJson();
            //对DataTable进行一些处理,将表头替换为中文
            DataTable dt;
            dt = ErrorDt.Clone();
            dt.Columns.Remove("错误原因");
            DataTable dtNew = successDt.Copy();  //复制successDt表数据结构
            for (int i = 0; i < dtNew.Rows.Count; i++)
            {
                dt.Rows.Add(dtNew.Rows[i].ItemArray);  //添加数据行
            }
            //如果有正确导入的数据,则将正确导入的数据保存到session
            if (dicDt[0] != null)
            {
                //DataTable转换为JSON
                String json = dtjson.toJson(dt); 
                //将JSON存在Session中,以便前台获取
                Session["successjson"] = json;  
            }
 在JS中获得到Session,如下图所示:
    
这样的JSON数据,肯定是不能被前台很好地识别的,所以需要进行转义,转义后的JSON数据如下所示:
    
  js代码如下:
<script type="text/javascript">
         $(document).ready(function () {
             //获得session      
             var successJson = '@Session["successjson"]';
             //alert(successJson);
             //将JSON数据进行转义
             var Json = successJson.replace(/"/gi, "\"");
             //alert(Json); 
         });
     </script>
三.JSON数据拼接为Table显示 
         这一问题是紧接第二个问题来的,我们在获取到了格式良好的JSON,下一步便是将它显示到前台了。但对于这些JSON数据,我们并没有任何可以承载它的List集合。因为题型不同,显示的数据不同,表头不同,而题型至少有20来种,我们也不能为了将其显示到前台,就去为每个题型写一个ViewModel集合,所以,我们采用动态拼接table的方法。
         想了很久,真的不知道该如何去将一个JSON数据拼接为一个Table。就在机房又剩下我和平哥在加班的时候,偶然间,在网上找到了一个实例,真的是幸福来得太突然了。解决问题的办法已经找到了,下面就是见证成功的时刻了。
         找到了一个插件,短短几行代码就可以解决我们的问题了。代码如下:
<title>题库管理——>试题管理</title>
    @*将JSON拼接为Table的引用*@
    <script type="text/javascript" src="../libs/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../dist/jquery.jsontotable.min.js"></script>
    <script type="text/javascript" src="../Content/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>   
    @*对Table的样式设置*@
    <style>
    .jsontotable table, .jsontotable th, .jsontotable td {
        border: 1px solid black;
        margin: 10px;
    }
  code {
    white-space: normal;
  }
    </style>
  
</head>
<body>
    @*Table区域*@
    <div class="container">
        <div id="jsontotable-obj" class="jsontotable" style="margin-top:30px;margin-left:20px;font-family:楷体;font-weight:bold;font-size:xx-large;"></div>
    </div>
     @*其它按钮*@
     <div>
          <a id="OK" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style="margin-top:450px;margin-left:880px;" onclick="OK()">完成</a>        
     </div>
    <div style="margin-top:-23px;">
         <a id="back" class="easyui-linkbutton" data-options="iconCls:'icon-back'" style="margin-left:1000px;" onclick="back()">返回</a>
    </div>
        <script type="text/javascript">
        $(document).ready(function() {
            //获得session      
            var successJson = '@Session["successjson"]';        
            //Json转义处理
            var obj1 = successJson.replace(/"/gi, "\"");       
            //Json对象转为Json数组
            var obj = '[' + obj1 + ']';      
            $("#jsontotable-obj")
            //标题
        .append($("<h1 style='font-family:楷体;font-weight:bold;font-size:32px;'></h1>").html("查看题库"))
            //表格内容显示
            $.jsontotable(obj, { id: "#jsontotable-obj", header: false });        
        });
        </script>
</body>
</html>  
    效果如下:
    

    【项目心得】
      1.不要总是把焦点放在实现功能的那一刻,其实,整个的实现过程,才是让自己有很大进步的源头。
     2.学习是不断反复的,事情也是不断变化的。不同的场合,相同的点,需要会做不同地处理。
     3.办法总比困难多。不要因为自己没做过或者是觉得自己做不到而放弃,多查、多想、多尝试,最后迎接自己的一定会是成功的喜悦。

目录
相关文章
|
2月前
|
XML JSON API
淘宝商品详情API的调用流程(python请求示例以及json数据示例返回参考)
JSON数据示例:需要提供一个结构化的示例,展示商品详情可能包含的字段,如商品标题、价格、库存、描述、图片链接、卖家信息等。考虑到稳定性,示例应基于淘宝开放平台的标准响应格式。
|
2月前
|
JSON Java 数据格式
微服务——SpringBoot使用归纳——Spring Boot返回Json数据及数据封装——封装统一返回的数据结构
本文介绍了在Spring Boot中封装统一返回的数据结构的方法。通过定义一个泛型类`JsonResult&lt;T&gt;`,包含数据、状态码和提示信息三个属性,满足不同场景下的JSON返回需求。例如,无数据返回时可设置默认状态码&quot;0&quot;和消息&quot;操作成功!&quot;,有数据返回时也可自定义状态码和消息。同时,文章展示了如何在Controller中使用该结构,通过具体示例(如用户信息、列表和Map)说明其灵活性与便捷性。最后总结了Spring Boot中JSON数据返回的配置与实际项目中的应用技巧。
119 0
|
2月前
|
JSON Java fastjson
微服务——SpringBoot使用归纳——Spring Boot返回Json数据及数据封装——使用 fastJson 处理 null
本文介绍如何使用 fastJson 处理 null 值。与 Jackson 不同,fastJson 需要通过继承 `WebMvcConfigurationSupport` 类并覆盖 `configureMessageConverters` 方法来配置 null 值的处理方式。例如,可将 String 类型的 null 转为 &quot;&quot;,Number 类型的 null 转为 0,避免循环引用等。代码示例展示了具体实现步骤,包括引入相关依赖、设置序列化特性及解决中文乱码问题。
63 0
|
2月前
|
JSON Java fastjson
微服务——SpringBoot使用归纳——Spring Boot返回Json数据及数据封装——Spring Boot 默认对Json的处理
本文介绍了在Spring Boot中返回Json数据的方法及数据封装技巧。通过使用`@RestController`注解,可以轻松实现接口返回Json格式的数据,默认使用的Json解析框架是Jackson。文章详细讲解了如何处理不同数据类型(如类对象、List、Map)的Json转换,并提供了自定义配置以应对null值问题。此外,还对比了Jackson与阿里巴巴FastJson的特点,以及如何在项目中引入和配置FastJson,解决null值转换和中文乱码等问题。
84 0
|
7天前
|
XML JSON API
如何在 Postman 中上传文件和 JSON 数据
如果你想在 Postman 中同时上传文件和 JSON 数据,本文将带你一步一步地了解整个过程,包括最佳实践和技巧,让你的工作更轻松。
|
8天前
|
JSON JavaScript 前端开发
如何在 Postman 中发送 JSON 数据
我们将深入探讨使用 Postman 发送 JSON 数据这一主题,Postman 是一款强大的 API 测试和开发工具。无论您是经验丰富的开发人员还是新手,掌握这项技能对于高效的 API 测试和开发都至关重要。
|
13天前
|
JSON Java 数据库连接
怎样用 esProc 计算来自 Restful 的多层 json 数据
esProc 是一款强大的数据处理工具,可简化 Java 处理 Restful 接口返回的复杂多层 JSON 数据的难题。通过 esProc,不仅能轻松访问和解析 Restful 数据,还能高效完成复杂计算任务,并可无缝嵌入 Java 应用中作为计算引擎使用。例如,筛选特定分类订单或计算金额,esProc 的脚本简洁直观,远优于传统 SQL 或纯 Java 实现。此外,esProc 支持安全认证(如 Cookie 和 Token)及 JDBC 集成,为开发者提供灵活高效的解决方案。
|
16天前
|
JSON JavaScript 数据格式
何如定义 JSON Schema 并验证该 json 数据?
本文定义了一个包含 audio 和 tags 两个必需属性的 JSON Schema,用于规范数据结构。其中,audio 是非空字符串,表示音频组件;tags 是非空数组,表示标签组件。通过示例数据和验证工具(如 ajv, NJsonSchema),可确保 JSON 数据符合 Schema 要求,从而保障数据的一致性和正确性。
84 1
|
2月前
|
数据采集 JSON 数据可视化
JSON数据解析实战:从嵌套结构到结构化表格
在信息爆炸的时代,从杂乱数据中提取精准知识图谱是数据侦探的挑战。本文以Google Scholar为例,解析嵌套JSON数据,提取文献信息并转换为结构化表格,通过Graphviz制作技术关系图谱,揭示文献间的隐秘联系。代码涵盖代理IP、请求头设置、JSON解析及可视化,提供完整实战案例。
188 4
JSON数据解析实战:从嵌套结构到结构化表格
|
2月前
|
存储 JSON API
淘宝商品详情API接口概述与JSON数据示例
淘宝商品详情API是淘宝开放平台提供的核心接口之一,为开发者提供了获取商品深度信息的能力。以下是技术细节和示例:
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等