转自:http://www.okajax.com/a/200911/json.html
<!-- /内容上广告-->
<!-- 此处可放幻灯广告/-->
越来越多的js供我们来选择,在使用过程中插件会提供一个数据给我们进行填充.现在大部分的数据格式都是为json.这个格式就需要后端开发人员提供给前端了.web的软件无非就是后端给前端数据,然后前端再转数据类型.然而这个转换该如何来做?
矛盾的产生:
1.前端的一个插件,下面以一个简单的jQuery插件为例子,这个方法可以帮助你为一个select标签添加项
1. $.fn.setSelect = function (data){
2. var self = this ;
3. self.empty();
4. $.each(data, function (i){
5. var oOption = document.createElement( "option" );
6. oOption.innerText = this .text;
7. oOption.value = this .value;
8. oOption.selected = this .selected;
9. self[0].appendChild(oOption);
10. });
11. }
作为这个插件的开发者,感觉这个方法很完美.它要求json的传进来的格式是这样的.
1. var data = [
2. {text: '' ,value: '' },
3. {text: '' ,value: '' },
4. {text: '' ,value: '' },
5. {text: '' ,value: '' ,selected: true }]
然后我告诉后端开发人员 ,"你只要给我上面的格式就可以了".
这个时候插件的开发者并没有意识到这个世界上的数据接口并不是他说了算的,后端有着其自己的业务逻辑.
现在假设我要显示一个后端为Employee的列表
1. public class Employee
2. {
3. public string Name { get; set; }
4.
5. public Guid Id { get; set; }
6.
7. public bool isOnline { get; set; }
8. }
作为后端人员,最简单的做法如下
1. List < Employee > list = GetEmployeeList ();
2. return list.ToJSON();
问题是Employee的属性不符合前端插件的要求.还好c# 3.0有匿名对象.还可以解决这个问题.现在更改后如下
1. List < Employee > list = GetEmployeeList ();
2.
3. var jsonList = from employee in list
4. select new { text = employee .Name, value = employee .Id, selected = employee .isOnline };
5. return jsonList.ToJSON();
后来后端人员发现,这样的情况实在太多了,好好的一个Employee对象,里面的属性全变成text,value,selected了...
这里便出现了矛盾,前端的接口也可以根据后端来定的。即数据也可以这样的
var data =[{Name:'',Id:'',isOnline:""}];
前端的开发者妥协了,无奈还是接收上面的数据.然后做了一个循环,把数据转成符合插件接口的数据.
var transdateData =[];
$.each(data,function() {
var newData ={};
newData.text = data .Name;
newData.value = data .Id;
newData.selected = data .isOnline;
transdateData.push(newData);
});
这样的做法并不好,为了用插件在循环,数据量大了就见的出来了.当然我们的目标还是需要转换数据的,这个转换确实应该前端来做,但我们要换个方法.
二.事件回调,格式化数据
改进插件的使用方法,在添加dom之前,格式化数据.现在插件代码如下,添加了一个formatEvent方法
$ .fn.setSelect = function (data,formatEvent){
var self = this ;
self.empty();
$.each(data, function(i){
if(formatEvent) formatEvent(this);
var oOption = document .createElement("option");
oOption.innerText = this .text;
oOption.value = this .value;
oOption.selected = this .selected;
self[0].appendChild(oOption);
});
插件使用方法
var data = [
{name:'xx',id:'xx'},
{name:'xx',id:'xx'}];
$("#xx").setSelect(data,function(e) {
e e.text =e.name;
e e.value =e.id;
});
ok,这样问题就解决了,这种方式在很多地方都可以使用.小小技巧,分享一下.
分享到:
相关推荐
总结,ASP.NET MVC提供了结构化的Web开发方式,前端与后端的数据传递主要通过Ajax调用完成,而jQuery库使得这个过程更加简便。在实际项目中,开发者应熟练掌握这些技术,以提高Web应用的交互性和性能。通过不断实践...
总的来说,"JSON格式化工具"是开发过程中不可或缺的辅助工具,无论是前端的HTML、CSS、JavaScript,还是后端的Java或其他语言,都能借助它更好地处理JSON数据,提升开发效率,减少调试时间,确保项目的顺利进行。
在处理大量JSON数据时,为了便于理解和调试,我们通常会需要使用JSON格式化工具。 "json离线格式化工具"是一款专为处理JSON数据设计的实用工具,它允许用户在没有网络连接的情况下对JSON数据进行美化和解析。这个...
无论是前端开发者处理API响应,还是后端开发者调试接口返回,或者是数据分析人员解析日志,一个高效的JSON格式化工具都是不可或缺的辅助工具。因此,选择一款适合自己工作流程的JSON工具是非常重要的。
JSONView.exe与其他浏览器调试工具(如Chrome的开发者工具、Firefox的开发者工具等)提供的JSON格式化功能有相似之处,它们都可以帮助开发者快速查看和解析JSON响应。这些工具通常具有以下特性: 1. 自动缩进:将...
JSON格式化工具是针对这种数据格式的辅助工具,旨在帮助开发者更方便地查看、编辑和验证JSON数据。 JSON数据通常以键值对的形式存在,例如`{"key": "value"}`。然而,当JSON文件或数据串变得庞大且复杂时,未经格式...
在实际开发过程中,JSON的使用场景非常广泛,比如API接口的数据交换、存储配置信息、前端与后端的数据交互等。因此,掌握一个可靠的JSON格式化和验证工具至关重要。HiJson的出现,无疑为开发者提供了一个高效的工具...
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式...总的来说,JSON格式化插件对于前端开发者、后端开发者以及任何需要处理JSON数据的人来说都是不可或缺的工具,它极大地提高了数据处理的便利性和效率。
标题"Json验证工具,Json格式化工具"所指的就是专门用于处理JSON数据的软件或在线服务,它可以帮助开发者检查JSON字符串是否符合语法规则,同时也可以将杂乱无章的JSON数据整理成整洁、易读的格式。 描述中的"Json...
JSONVue 是一款专为格式化 JSON 数据设计的插件,尤其在浏览器环境下使用,能够帮助用户将杂乱无章的 JSON 对象转换成整洁、易读的格式,从而提升开发和调试过程中的效率。JSON(JavaScript Object Notation)是一种...
标题中的“notepad 插件(代码格式化、json格式化)”指的是为Notepad++文本编辑器安装的两个特定插件,它们分别是用于代码格式化的AStyle插件和用于JSON格式化的NPPJSONViewer插件。Notepad++是一款免费且开源的...
"谷歌浏览器JSON格式化插件"就是为了解决这个问题而设计的。这个插件允许开发者在谷歌浏览器中直接查看和格式化JSON数据,无需借助外部工具或手动进行格式调整。一旦安装了该插件,当你访问一个包含JSON数据的网页时...
网页版JSON格式化工具是专门用来处理和查看JSON数据的在线工具,对于开发者来说,能够帮助他们快速检查、解析和美化JSON数据,使得数据结构一目了然。 JSON格式的基本结构包含键值对,以大括号{}表示对象,方括号[]...
前端通过发送Ajax请求,可能使用JSON格式传递数据,与后端接口进行交互,后端再通过SQL语句与数据库进行通信,实现数据的增删改查。数据库管理系统可能包括MySQL、Oracle、SQL Server等,具体选择取决于项目需求和...
本文将详细介绍如何在Notepad++中安装和使用XML和JSON格式化插件,以帮助程序员更有效地编辑和美化这两种数据格式。 XML(Extensible Markup Language)是一种用于存储和传输数据的标准格式,广泛应用于Web服务、...
在开发过程中,JSON格式化工具是非常实用的辅助工具,无论是在前端调试接口返回的数据,还是后端处理API请求,都能大大提升开发者的生产力。这款“JSON 格式化工具”的下载资源名为“Zx.JsonV”,用户可以通过解压缩...
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,被广泛用于Web服务和应用程序之间的数据传输。...无论是前端开发、后端开发还是数据分析,理解和掌握JSON以及使用相应的工具都是必不可少的技能。
3. **JSON格式**:数据通常以JSON格式传输,易于解析和序列化。 四、安全和优化 1. **跨域资源共享(CORS)**:允许前端从不同源获取数据,需设置正确CORS策略。 2. **JSON Web Token(JWT)**:用于身份验证,安全地...