前端JSON使用总结

JSON: JavaScript Object Notation(JavaScript 对象表示法)的简称。

1. 什么是 JSON ?

JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)。

JSON 是轻量级的文本数据交换格式,是存储和交换文本信息的语法。类似 XML,但比 XML 更小、更快,更易解析。

JSON 使用 Javascript语法来描述数据对象,但是 JSON 仍然独立于语言和平台。

JSON 具有自我描述性,更易理解。

JSON 实例如下:

{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

这个 employee 对象是包含 3 个员工记录(对象)的数组。

2. JSON语法规则

JSON 语法是 JavaScript 对象表示法语法的子集。

(1). 数据在名称/值对中

JSON 数据的书写格式是:名称/值对。

名称/值对包括字段名称(在双引号中),后面写一个冒号,然后是值:

"firstName" : "John"

等价于下面的JavaScript 语句:

firstName = "John"。

JSON 值可以是:数字(整数或浮点数), 字符串(在双引号中), 逻辑值(true 或 false), 数组(在方括号中), 对象(在花括号中), null。

(2). 数据由逗号分隔

(3). 花括号保存对象

JSON 对象在花括号中书写, 对象可以包含多个名称/值对:

{ "firstName":"John" , "lastName":"Doe" }

与下面的JavaScript 语句等价:

firstName = "John"
lastName = "Doe"

(4)     方括号保存数组

JSON 数组在方括号中书写,数组可包含多个对象:

{

"employees": [

{ "firstName":"John" , "lastName":"Doe" },

{ "firstName":"Anna" , "lastName":"Smith" },

{ "firstName":"Peter" , "lastName":"Jones" }

]

}

在上面的例子中,对象 "employees" 是包含三个对象的数组。每个对象代表一条关于某人(有姓和名)的记录。

3. JSON 文件

JSON 文件的文件类型是 ".json"结尾的文件。

JSON 文本的 MIME 类型是 "application/json"。

4. JSON 使用 JavaScript 语法。

因为 JSON 使用 JavaScript 语法,所以无需额外的软件就能处理 JavaScript 中的 JSON。

通过 JavaScript,您可以创建一个对象数组,并像这样进行赋值:

var employees = [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName": "Jones" }
];

可以像这样访问 JavaScript 对象数组中的第一项:

employees[0].lastName;

返回的内容是:

Doe

可以像这样修改数据:

employees[0].firstName = "Jonatan";

5. JSON转换为JavaScript 对象。

JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。由于这种相似性,JavaScript程序无需解析器就能够使用内建的 eval() 函数用 JSON 数据生成原生的 JavaScript 对象。

6. JSON与与 XML的异同

与 XML 相同之处:

(1). JSON 是纯文本

(2).JSON 具有"自我描述性"(人类可读)

(3). JSON 具有层级结构(值中存在值)

(4). JSON 可通过 JavaScript 进行解析

(5). JSON 数据可使用 AJAX 进行传输

与 XML 不同之处:

  (1). 没有结束标签

(2). 更短

(3).读写的速度更快

(4).能够使用内建的 JavaScript eval() 方法进行解析

(5).使用数组

  (6).不使用保留字

故而,对于 AJAX 应用程序来说,JSON 比 XML 更快更易使用:

使用 XML的解析步骤:

读取 XML 文档

使用 XML DOM 来循环遍历文档

读取值并存储在变量中

使用 JSON

读取 JSON 字符串

  用 eval() 处理 JSON 字符串

7. JSON 使用案例

7.1 把 JSON 文本转换为 JavaScript 对象

JSON 最常见的用法之一,是从 web 服务器上读取 JSON 数据(作为文件或作为 HttpRequest),将 JSON 数据转换为 JavaScript 对象,然后在网页中使用该数据。

为了简单讲解,我们使用字符串作为输入进行演示(而不是文件)。

创建包含 JSON 语法的 JavaScript 字符串:

var txt = ‘{ "employees" : [‘ +
‘{ "firstName":"John" , "lastName":"Doe" },‘ +
‘{ "firstName":"Anna" , "lastName":"Smith" },‘ +
‘{ "firstName":"Peter" , "lastName":"Jones" } ]}‘;

由于 JSON 语法是 JavaScript 语法的子集,JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。

eval() 函数使用的是 JavaScript 编译器,可解析 JSON 文本,然后生成 JavaScript 对象。必须把文本包围在括号中,这样才能避免语法错误:

var obj = eval ("(" + txt + ")"); 

在网页中使用 JavaScript 对象:

<p>
First Name: <span id="fname"></span><br />
Last Name: <span id="lname"></span><br />
</p>

<script>
document.getElementById("fname").innerHTML = obj.employees[1].firstName
document.getElementById("lname").innerHTML = obj.employees[1].lastName
</script>

完整案例如下:

<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p>
First Name: <span id="fname"></span><br>
Last Name: <span id="lname"></span><br>
</p>
<script>
var txt = ‘{"employees":[‘ +
‘{"firstName":"John","lastName":"Doe" },‘ +
‘{"firstName":"Anna","lastName":"Smith" },‘ +
‘{"firstName":"Peter","lastName":"Jones" }]}‘;

var obj = eval ("(" + txt + ")");

document.getElementById("fname").innerHTML=obj.employees[1].firstName
document.getElementById("lname").innerHTML=obj.employees[1].lastName
</script>
</body>
</html>            

效果如下所示:

7.2 JSON 解析器

eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本,而不会编译脚本。在浏览器中,这提供了原生的 JSON 支持,而且 JSON 解析器的速度更快。较新的浏览器和最新的 ECMAScript (JavaScript) 标准中均包含了原生的对 JSON 的支持。

Web 浏览器支持 Web 软件支持
  • Firefox (Mozilla) 3.5
  • Internet Explorer 8
  • Chrome
  • Opera 10
  • Safari 4
  • jQuery
  • Yahoo UI
  • Prototype
  • Dojo
  • ECMAScript 1.5

对于较老的浏览器,可使用 JavaScript 库: https://github.com/douglascrockford/JSON-js

完整案例如下:

<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p>
First Name: <span id="fname"></span><br>
Last Name: <span id="lname"></span><br>
</p>
<script>
var txt = ‘{"employees":[‘ +
‘{"firstName":"John","lastName":"Doe" },‘ +
‘{"firstName":"Anna","lastName":"Smith" },‘ +
‘{"firstName":"Peter","lastName":"Jones" }]}‘;

obj = JSON.parse(txt);

document.getElementById("fname").innerHTML=obj.employees[1].firstName
document.getElementById("lname").innerHTML=obj.employees[1].lastName
</script>
</body>
</html>            

效果如下所示:

时间: 2024-11-10 15:11:09

前端JSON使用总结的相关文章

SpringBoot学习笔记(5):处理前端JSON返回的日期的格式

SpringBoot学习笔记(4):处理前端JSON返回的日期的格式 问题描述 前端页面显示的时间为毫秒格式,不利于直观显示! 解决方法1--后端解决 public class Flow { @JsonFormat(pattern = "yyyy-MM-dd", timezone="GMT+8") private Date flow_date; ..... } 解决方法2--JS处理 function crtTimeFtt(val, row) { if (val !

服务器端-前端json数据传输小结

Java服务端收到前端字符串转json: import com.alibaba.fastjson.JSONObject; String s = "{\"userLoginId\":\"sysman\",\"mobileIds\":\"bdzfzl001,sgbj001\"}"; JSONObject jsonobj = JSON.parseObject(s); System.out.println(json

前端json数据利用jQuery显示在DataGrid控件里面

有时网页后端传到前端的数据格式为json,我们需要把它展示在DataGrid里面,以下为操作代码: var jsonString = '{"total":'+getJsonObjLength(json)+',"rows":'+JSON.stringify(json)+'}'; //getJsonObjLength(json) 是为了得到json格式数据的长度 var jsonObject = $.parseJSON(jsonString); $("#dat

纯前端JSON文件编辑器[0]

准备工作 参考资料: FileReader(用来获取上传文件的数据) <download>(用来设置下载文件的名称) Blob(用来存储数据的一个容器) createObjectURL(用来将一个Blog对象转换为Base64格式资源的API) 前言: 因前段时间给老板做了个在线编辑lua文件的小工具,期间用到了上述几个新的API,感觉挺有意思,所以决定做一个在线编辑JSON文件的例子show出来,并重新捋一遍思路. 代码会在 这里 更新,不出意外应该会使用ES6的语法进行编码. 预期效果:

转---如何让前端更安全?——XSS攻击和防御详解

前言 平时很少关注安全这块的技术,曾经也买过一本<Web前端黑客技术揭秘>但至今还没翻过,尴尬.今天的早读文章由腾讯优测@小吉带来的分享. 正文从这开始~ 最近深入了解了一下XSS攻击.以前总浮浅的认为XSS防御仅仅只是输入过滤可能造成的XSS而已.然而这池子水深的很呐. XSS的类型 总体来说,XSS分三类,存储型XSS.反射型XSS.DOM-XSS. 存储型XSS 数据库中存有的存在XSS攻击的数据,返回给客户端.若数据未经过任何转义.被浏览器渲染.就可能导致XSS攻击: 反射型XSS 将

关于Json的那点事

说明: 说明一点JS是直接支持Json的 所以可以直接如下写: var a={"Age":28,"LastLoginTime":"2011-01-09 01:00:56","Name":"张三"};  直接是json对象 而不必 写成: var a=’{"Age":28,"LastLoginTime":"2011-01-09 01:00:56",&

前后端JSON传递

前端 JSON.stringify()参数中放array数字类型或者队形 后端 requestgetParameter得到字符串 然后用JSONArray方法 Jjfpb[] jjfpbs = (Jjfpb[])JSONArray.toArray(JSONArray.fromObject(datas),Jjfpb.class); 这样就会转换成Jjfpb的数组集合.

json和字符串/数组/集合的互相转换の神操作总结

一:前端字符串转JSON的4种方式 1,eval方式解析,恐怕这是最早的解析方式了. function strToJson(str){ var json = eval('(' + str + ')'); return json; } 2,new Function形式,比较怪异哦. function strToJson(str){ var json = (new Function("return " + str))(); return json; } IE6/7中当字符串中含有换行(\n

js里面Json数据的操作

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式.博主记得几年前在华为外包项目中有一个和Android应用交互的需求,Android调用C#的Webservice的接口,就是通过Json这种格式来传递数据的.就是因为这种完全独立于语言的数据格式,所以在系统的前后台被广泛使用.本篇用来记录下前端JS以及后端C#里面JSON的一些常用的操作方法.笔记笔记,好记性不如多笔记~~ JS前端JSON操作: 一.Json数据转字符串: