JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。

注:为了方便地处理JSON数据,JSON提供了json.js包。

1、json结构的数据的简述

  A、在JSON中,有两种结构:对象和数组。

    (1) 对象:以“{”(左大括号)开始,“}”(右大括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间运用 “,”(逗号)分隔。 名称用引号括起来;值如果是字符串则必须用括号,数值型则不须要。例如:

   var person={"name":"cxh","address":"shanghai","age":22,"date":"2009-08-20"};

    (2)数组:数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间运用 “,”(逗号)分隔。

  例如:var jsonArrlist=[{"name":"cxh","address":"shanghai","age":22,"date":"2009-08-20"},{"name":"cxh","address":"shanghai","age":22,"date":"2009-08-20"}];

  B、json的传递

  在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。例如:

JSON字符串: var str = '{ "name":"cxh","address":"shanghai","age":22 }';

JSON对象:    var obj= { "name":"cxh","address":"shanghai","age":22 };

2、将json字符串转换为json结构(以上面的str为例子)

  方法一:var strObj=eval("("+str+")"); 【如果双引号不行的话,可以换成单引号:eval('('+str+')')】;

  方法二:var strObj=$.parseJSON(str)

  方法三:var strObj=JSON.parse(str);

  方法四:var strObj=str.parseJSON();  【需要json.js包,高版本的】

  注:如果obj本来就是一个JSON对象,那么运用 eval()函数转换后(哪怕是多次转换)还是JSON对象,但是运用 parseJSON()函数处理后会有疑问(抛出语法异常)。

3、将json结构的转换成json字符串(以上面的obj为例子)

  方法一:var jsonStr=JSON.stringify(obj);

  方法二:var jsonStr=obj.toJSONString();【需要json.js包,高版本的】

4、向json结构中动态添加数据的方法

  方法一:obj.name="xiao";

  方法二:obj["name"]="xiao";

  注:如果添加数据的key是动态的话,只能用方法二来实现;例如:

var param = {};
for(var i=0;i<fields.length;i++){
var field = fields[i];
if(field.searchCondition != undefined && $('#search'+field.name).val() != ''){
param["search."+field.name]=$('#search'+field.name).val();
}
}

  

注意点:json数据应用中的兼容和异常(插件json.js---IE 兼容)

  1、上面的多个要领中,除了eval()函数是js自带的之外,其他的多个要领都来自json.js包。新版本的 JSON 修改了 API,将 JSON.stringify() 和 JSON.parse() 两个要领都注入到了 Javascript 的内建对象里面,前者变成了 Object.toJSONString(),而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要领,则说明您的json包版本太低

前端--json数据的处理及相关兼容问题的更多相关文章

  1. 应用express mockjs模拟前端json数据接口

    一.首先需要在项目安装express 1.cnpm install express --save-dev  2.cnpm install mockjs --save-dev 二.在项目根目录下新建pr ...

  2. 前端JSON请求转换Date问题

    目的:记录使用SpringMVC中前端JSON数据中的日期转换成Date数据类型时区产生的问题 记录下遇到过的问题 在使用SpringMVC框架中,使用@RequestBody注解将前端的json数据 ...

  3. SpringMVC与Json数据交互

    简单回顾了一下SpringMVC和前端JSON数据是怎么交互的 接下来详细说一下过程 前端代码写的很简单  主要是为了试验一下JSON数据的前后台传递 前端代码给大家发出来 其实真的很简单 前端接受了 ...

  4. 前端学习——使用Ajax方式POST JSON数据包

    0.前言     本文解释怎样使用Jquery中的ajax方法传递JSON数据包,传递的方法使用POST(当然PUT又有时也是一个不错的选择).POST JSON数据包相比标准的POST格式可读性更好 ...

  5. json数据在前端(javascript)和后端(php)转换

    学习目的:前后端数据交换   思路: json数据格式是怎么样? 后端各种语言怎么将自己内容转换成json格式的内容? 前端怎么接收json数据?有几种方式? js中怎么将json数据转换成js中的数 ...

  6. 如何解析json字符串及返回json数据到前端

    前言:最近需要实现的任务是:写若干个接口,并且接口中的请求数据是json格式,然后按照请求参数读取前端提前整理好的json数据,并且将json数据返回到服务器端. 主要的工具:Gson  2.8.2 ...

  7. java后台设计简单的json数据接口,设置可跨域访问,前端ajax获取json数据

    在开发的过程中,有时候我们需要设计一个数据接口.有时候呢,数据接口和Web服务器又不在一起,所以就有跨域访问的问题. 第一步:简单的设计一个数据接口. 数据接口,听起来高大上,其实呢就是一个简单的Se ...

  8. phpStudy4——前端页面使用Ajax请求并解析php返回的json数据

    项目需求: 在html页面显示所有用户列表信息. 需求分析: 1. html页面使用ajax向后端php请求用户数据 2. php脚本查询数据库,并将查询后的结果以json格式返回前端html页面 3 ...

  9. Python web后端接收到的json数据有前端格式的布尔值 true false

    最近在后端处理前端传过来的json数据,发现,因为数据是各种数据格式的嵌套,使用json.loads(),无法将内层的数据转换为原来格式的数据,所以需要使用eval( )函数进行转换,但是如果数据含有 ...

随机推荐

  1. Color the ball----HDOJ1556

    Color the ball Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  2. HDOJ/HDU 1015 Safecracker(深搜)

    Problem Description === Op tech briefing, 2002/11/02 06:42 CST === "The item is locked in a Kle ...

  3. JavaScript高级程序设计42.pdf

    IE中的事件对象 要访问IE中的event对象有几种不同的方式,取决于指定事件处理程序的方法.在使用DOM0级方法添加事件处理程序时,event对象作为window对象的一个属性存在 wondow.e ...

  4. ambari的重新安装

    ambari是什么呢? 这里我简单说一下ambari的目的,他的目的就是简化hadoop集群的安装和管理.对于安装简化到什么地步呢?只需要几个命令,在页面上配置几个参数,几百几千个节点的集群就能安装成 ...

  5. usaco 地震 && 奶牛观光

    Usaco 地震: Description 一场地震把约翰家的牧场摧毁了,坚强的约翰决心重建家园.约翰已经重建了N个牧场, 现在他希望能修建一些道路把它们连接起来.研究地形之后,约翰发现可供修建的道路 ...

  6. hdoj 2036 改革春风吹满地

    改革春风吹满地 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  7. HTML5 简单画图,切片,变形

    本人是在校学生,由于这段时间不知道怎么回事,心情比较无聊没有事干,所以利用这段时间学一下HTML5,发博客的目的是为了以后可以查询,也希望各位大神能够指导像我们这样的菜鸟,告别菜鸟的时段 我学东西时候 ...

  8. MySQL添加外键时报错 ERROR 1215 (HY000): Cannot add foreign key constraint

    1.数据类型      2.数据表的引擎 数据表 mysql> show tables; +------------------+ | Tables_in_market | +--------- ...

  9. CSS3实现兼容性的渐变背景效果

    一.CSS3实现兼容性渐变背景效果,兼容FF.chrome.IE 渐变效果,现在主流的浏览器FF.Chrome.Opera.IE8+都可以通过带有私有前缀的CSS3属性来轻松滴实现渐变效果,IE7及以 ...

  10. java 加减乘除错误

    有次做一个for循环(1000次左右),做的事情也是很简单的事情,就是   Double testValue = (long类型 / 8 ) * long类型 的一些加减乘除操作, 但是总是出现一些数 ...