json

本文由码农网 –
小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

在JavaScript中使用JSON数据,javascriptjson数据

JSON 是 JavaScript 原生格式,这意味着 在 JavaScript 中处理 JSON
数据不需要任何特殊的 API 或工具包。

JSON语法

JSON建构于两种结构:

对象——名称/值对的集合。不同的语言中,它被理解为对象,纪录,结构,字典,哈希表,有键列表(keyed
list),或者关联数组。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’
对”之间使用“,”(逗号)分隔。

数组——值的有序列表。在大部分语言中,它被理解为数组。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔。

JSON没有变量或其他控制结构。JSON只用于数据传输。

将JSON 数据赋值给变量

例如,可以创建一个新的 JavaScript 变量,然后将 JSON
格式的数据字符串直接赋值给它:

var people =
{ "programmers": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "[email protected]" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "[email protected]" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "[email protected]" }
],
"authors": [
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
],
"musicians": [
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
]
}

这非常简单;现在 people 包含前面看到的 JSON
格式的数据。但是,这还不够,因为访问数据的方式似乎还不明显。

访问数据

尽管看起来不明显,但是上面的长字符串实际上只是一个数组;将这个数组放进
JavaScript
变量之后,就可以很轻松地访问它。实际上,只需用点号表示法来表示数组元素。所以,要想访问
programmers 列表的第一个条目的姓氏,只需在 JavaScript
中使用下面这样的代码:

people.programmers[0].lastName;

注意,数组索引是从零开始的。所以,这行代码首先访问 people
变量中的数据;然后移动到称为 programmers 的条目,再移动到第一个记录(
[0] );最后,访问 lastName 键的值。结果是字符串值 “McLaughlin” 。

下面是使用同一变量的几个示例。

people.authors[1].genre 
// Value is "fantasy"
people.musicians[3].lastName 
// Undefined. This refers to the fourth entry,and there isn't one
people.programmers[2].firstName 
// Value is "Elliotte"

利用这样的语法,可以处理任何 JSON 格式的数据,而不需要使用任何额外的
JavaScript 工具包或 API 。

修改 JSON 数据

正如可以用点号和括号访问数据,也可以按照同样的方式轻松地修改数据:

people.musicians[1].lastName = "Rachmaninov";

在将字符串转换为 JavaScript json
格式对象之后,就可以像这样修改变量中的数据。

注意:json 格式的对象和 json 文本是不同的

var obj={name:" 张三 ","sex":' 男 '}; //json 格式的对象
var str=" { name: " 张三 " , "sex" : ' 男 ' }" ; //json 格式的字符串( json 格式的文本)

转换回字符串

当然,如果不能轻松地将对象转换回本文提到的文本格式,那么所有数据修改都没有太大的价值。在
JavaScript 中这种转换也很简单:

var newJSONtext = people.toJSONString();

这样就行了!现在就获得了一个可以在任何地方使用的文本字符串,例如,可以将它用作
Ajax 应用程序中的请求字符串。

更重要的是,可以将任何 JavaScript 对象转换为 JSON
文本。并非只能处理原来用 JSON 字符串赋值的变量。为了对名为 myObject
的对象进行转换,只需执行相同形式的命令:

<script type="text/javascript">
function Car(make,model,year,color)
{
this.make=make; 
this.model=model; 
this.year=year; 
this.color=color;
} 
function showCar()
{
var carr = new Car("Dodge","Coronet R/T",1968,"yellow"); 
alert(carr.toJSONString()); 
}
</script>

这就是 JSON 与其他数据格式之间最大的差异。如果使用 JSON
,只需调用一个简单的函数,就可以获得经过格式化的数据,可以直接使用了。对于其他数据格式,需要在原始数据和格式化数据之间进行转换。即使使用
Document Object Model 这样的 API
(提供了将自己的数据结构转换为文本的函数),也需要学习这个 API 并使用
API 的对象,而不是使用原生的 JavaScript 对象和语法。

最终结论是,如果要处理大量 JavaScript 对象,那么 JSON
几乎肯定是一个好选择,这样就可以轻松地将数据转换为可以在请求中发送给服务器端程序的格式(Ajax)

JSON字符串转换为JSON对象的方法

要使用上面的str1,必须使用下面的方法先转化为JSON对象:

//由JSON字符串转换为JSON对象
var obj = eval('(' + str + ')');

或者

var obj = str.parseJSON(); //由JSON字符串转换为JSON对象

或者

var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

然后,就可以这样读取:

Alert(obj.name);
Alert(obj.sex);

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

undefined_腾讯视频

不管有多少服务器端语言出现,没有谁能够取代PHP。至少是不久的将来都不可能。
PHP还有许多最著名的web应用程序的支柱。

您可能感兴趣的文章:

  • js使用eval解析json实例与注意事项分享
  • java对象序列化与反序列化的默认格式和json格式使用示例
  • jquery序列化form表单使用ajax提交后处理返回的json数据
  • JSON中双引号的轮回使用过程中一定要小心
  • 教你如何使用PHP输出中文JSON字符串
  • JSON.parse()和JSON.stringify()使用介绍
  • 直接在JS里创建JSON数据然后遍历使用
  • PHP中使用json数据格式定义字面量对象的方法
  • 使用JSON.parse将json字符串转换成json对象的时候会出错
  • Android中生成、使用Json数据实例
  • PHP使用json_encode函数时不转义中文的解决方法
  • ASP.NET中MVC使用AJAX调用JsonResult方法并返回自定义错误信息

JSON 是 JavaScript 原生格式,这意味着 在 JavaScript 中处理 JSON
数据不需要任何特殊的 API 或工具包。…

1.背景介绍

如果你是一个后端开发人员,并且PHP是你技术堆栈的一部分,那么你会发现本教程非常有用。在这篇文章中,我将讲解如何一步一步使用PHP,FusionCharts的核心JavaScript图表库,以及它的PHP图表包装程序创建漂亮的图表。

2.知识剖析

下面就是我们今天要完成的目标图表

3.常见问题

图片 1

4.解决方案

有四个步骤:

5.编码实战

  • 步骤0:准备数据
  • 步骤1:引用JS和PHP文件
  • 步骤2:创建图表对象
  • 步骤3:渲染图表

6.扩展思考

步骤0:准备数据

由于需要在计划对数据可视化之前,先准备好数据,所以我叫这一步为步骤0,而非步骤-1。

FusionCharts既理解XML,也理解JSON数据格式,不过在本教程中,我们只用JSON。我们将通过转换以下数据为FusionCharts认可的JSON键值来启动我们的教程。

月份 收入
Oct 490000
Nov 900000
Dec 730000

下面是上述数据的JSON表示:

[
    {"label": "Oct", "value": "490000"},
    {"label": "Nov", "value": "900000"},
    {"label": "Dec", "value": "730000"}
]

我们将使用上述数据绘制条形图,并格式化我们的行为。对于其他图表类型,可能会有点复杂。

7.参考文献

步骤1:引用依赖性

在这一步中,我们将包括FusionCharts的核心JavaScript库和PHP图表包装程序。

具体是这样做到的:

<? php
// including FusionCharts PHP wrapper
    include(path/to/fusioncharts.php);
?>

<head>
    <!-- FusionCharts core package files -->
    <script type="text/javascript" src="path/to/fusioncharts.js"></script>
</head>

8.更多讨论

步骤2:创建图表对象

这一步我们要使用FusionCharts的PHP包装程序类为我们的图表 $coolChart 创建一个对象。创建图表对象的语法如下:

$objectName = new FusionCharts("chart type",
              "unique chart ID",
              "Chart Width",
              "Chart Height",
              "HTML Element for Chart",
              "Chart Data Format",
              "Data Source");

下面的图表对象用于我们要在本教程中创建的图表:

$coolChart = new FusionCharts("bar2d", "myCoolPHPChart", "100%", "600",
               "barchart-container", "json",
               '{
                "chart": {
                    "caption": "Monthly revenue for Q4 - 2015",
                    "xAxisName": "Month",
                    //Other Chart Options
                },
                "data": [{
                    "label": "Oct",
                    "value": "490000"
                } //More Chart Data
            }');

上述语法中提到的“Data Source”包含两个对象:

图表对象:包括负责图表交互性和装饰的各种属性。它们中的一些说明如下:

  • showHoverEffect:(布尔型),用于启用或禁用图表中的悬停效果。
  • plotFillHoverColor:(十六进制代码/颜色名称)用来定义鼠标悬停的曲线颜色。
  • plotFillHoverAlpha:(整型)用于定义悬停颜色的透明度。
  • baseFont:(字符串)用于定义图表的字体类型。
  • baseFontSize:(整型)用于设置图表的字体大小。
  • baseFontColor:(十六进制代码/颜色名称)用于设置图表的字体颜色。

数据对象:包括用于每个数据图的标签和它们相应的值。可以被添加到数据对象内的其它属性是:

  • displayValue:(字符串)允许你为特殊的数据图设置自定义的字符串值。
  • link:(字符串)允许你通过数据图链接到网页,drill-down图表或自定义的JavaScript函数来获取更进一步的图表功能。
  • showLabel:(布尔型)用于启用或禁用特定数据图(栏)的标签显示。

有很多可用的自定义选项可以根据你的具体使用情况使用。你可以查看这个庞大的图表属性列表来进行进一步探索。

1.背景介绍

步骤3:渲染图表

在渲染图表时,我们要定义HTML<div>元素。下面是做法:

<body>
    <div id="barchart-container">Cool Chart on its way!</div>
</body>

要渲染图表,我们将调用render方法用于上面步骤中创建的图表对象。

$coolChart->render();

如果你正确地按照我上面提到的步骤去做,那么现在你应该已经创建好了一个图表。如果你在你的代码中发现任何错误,也可以参阅GitHub代码仓库以获得这个项目的全部源代码。

JSON-taglib是一个JSP 2.0标记库,用于在JSP代码中呈现JSON(JavaScript
Object
Notation)数据。它可以作为AJAX应用程序的服务器端的一部分,允许您使用JSP的全部功能来格式化JSON数据。

更多资源

在本教程中,我们在图表对象内直接传递JSON用于图表,但也有其他加载数据的方法。可以参考这个文档页面来了解其他加载数据的方法。

PHP和MySQL被认为是用于服务器端语言和数据库的最好结合之一,目前被许多流行的web应用程序使用。要了解更多有关于它们的用法,可以查看这篇有关如何使用PHP和来自于MySQL数据库数据创建drill-down图表的教程。

PS:欢迎提出有关于本教程的任何问题!

标签库建立在由Douglas Crockford编写的Java JSON库上。

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

JSON是轻量级的文本数据交换格式

JSON独立于语言以上传.json使用的JavaScript的的语法来描述数据对象,但是JSON仍然独立于语言和平台以上传.json解析器和JSON库支持许多不同的编程语言目前非常多的动态(PHP,JSP,
.NET)编程语言都支持JSON。

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

2.知识剖析

JSON是一种轻量级的数据交换格式。它是一种基于文本的,用于表示数据结构的可读格式.JSON是JavaScript对象文字符号的一个子集,广泛用于AJAX
Web应用程序。

JSON-taglib被设计为尽可能易于使用。

它只做一件事:在JSP中呈现JSON数据。

SON-taglib由3个用于定义数据的简单标签组成:JSON:object,JSON:property和JSON:array。

JSON-taglib标签的建立

在JSP中包含taglib。只需将json-taglib jar文件放入webapp的WEB-INF /
lib目录中,然后在JSP的顶部使用以下taglib声明。

<%@ taglib prefix =“json”uri
=“;

一、JSON对象

JSON:object标签用于创建JSON对象对象可以根据需要多次嵌套上传上传上传上传.json对象包含属性,使用上面描述的JSON:属性标签添加。

二、JSON属性

JSON:property标记来呈现JSON属性可以用该属性标签将属性添加到数据,对象或者数组中进行嵌套使用

JSON属性基本上只是名称/值对。

名称就是是一个字符串,可以在标签上设置name =“…”属性。

值通过在标签上设置value =“…”属性。

如果指定的值是一个布尔值,那么它将被转换为一个JSON布尔值

如果指定的值是一个数字(整数,短,长,双,浮点数),那么它将被转换成JSON数值。

如果该值是一个字符串,它将被转换为一个JSON字符串。

任何其他用于设置值的的的的的Java类型都将调用的的的toString()方法,它们将被视为JSON字符串。

三、JSON数组

JSON:array标签用于创建JSON数组上传上传上传上传.json数组可能包含字符串,数值,布尔值,JSON对象或其他JSON数组。

使用items =“…”属性传递值的集合或数组。

集合将被迭代,集合中的每个值都将被添加到JSON数组中。

集合中的项目类型遵循与JSON属性相同的规则,所以整数将成为JSON数字,布尔变成JSON布尔等等。

3.常见问题

为什么推荐使用JsonTaglib来处理的的的Json的??

4.解决方案

使用JSON-标签库,在控制器中的代码更加简洁,易读

使用JSON-标签库更加灵活,如果以后需要更改JSON数据格式,只需要更改JSP页面即可,不需要改动控制器代码

5.编码实战

6.扩展思考

生成的的的Json的有几种方式,他们之间的好处和坏处分别是什么?

7.参考文献

参考一:HTTP://json-taglib.sourceforge.net/

参考二:HTTPS://v.qq.com/x/page/q05502dk6ls.html

参考三:HTTP://www.runoob.com/json/json-tutorial.html

参考四:

8.更多讨论

json和xml的联系?

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快,更易解析。

欢迎大家交流和讨论

鸣谢

感谢大家观看

BY : 刘子源

PPT链接:

发表评论

电子邮件地址不会被公开。 必填项已用*标注