JavaScript:基础扩展(1)——JSON
JavaScript:扩展知识(1)——JSON
理解:
关于 JSON,最重要的是要理解它是一种数据格式,不是一种编程语言。虽然具有相同的语法形式,但 JSON 并不从属于 JavaScript。而且,并不是只有 JavaScript 才使用 JSON,毕竟 JSON 只是一种数据格式。很多编程语言都有针对 JSON 的解析器和序列化器。
- JSON 文件的文件类型是 ".json"
- JSON 文本的 MIME 类型是 "application/json"
语法:
JSON取值
- 数字(整数或浮点数)
- 字符串(在双引号中)
- 逻辑值(true 或 false)
- 数组(在中括号中)
- 对象(在大括号中)
- null
{ "age":30 }
{ "flag":true }
{ "runoob":null }
对象
说明:
1.JSON对象在{}中书写。
2.对象可以包含多个 key/value(键/值)对。
3.key必须为字符串,value必须为合法的JSON数据类型。
4.key 和 value 中使用冒号(:)分割。每个 key/value 对使用逗号(,)分割。
对象表示法:
/*JSON对象表示法*/
{
“name”:"MS",
"age":100,
"id":10010
}
对象数组:
/*JSON数组*/
[
{"title":"a","num":10},
{"title":"b","num":20},
{"title":"c","num":30}
]
访问对象值:
/*使用 . 访问对象值*/
var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj.name; /*使用 [] 访问对象值*/
var myObj, x;
myObj = myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj["name"];
使用循环来遍历对象
var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
document.getElementById("demo").innerHTML += myObj[x] + "<br>";
}
嵌套JSON对象
一个JSON对象嵌套另一个JSON对象
myObj = {
"name":"runoob",
"alexa":10000,
"sites": {
"site1":"www.runoob.com",
"site2":"m.runoob.com",
"site3":"c.runoob.com"
}
}
访问嵌套的JSON对象
x = myObj.sites.site1;
// 或者
x = myObj.sites["site1"];
修改值
myObj.sites.site1 = "www.google.com"; myObj.sites["site1"] = "www.google.com";
删除对象属性
delete myObj.sites.site1; delete myObj.sites["site1"]
解析和序列化
解析
说明:
- JSON 通常用于与服务端交换数据。
- 在接收服务器数据时一般是字符串。
- 我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

从服务端接收JSON数据(http://www.runoob.com/json/json-parse.html)
使用 AJAX 从服务器请求 JSON 数据,并解析为 JavaScript 对象。
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);
xmlhttp.send();
序列化
说明:
- JSON 通常用于与服务端交换数据。
- 在向服务器发送数据时一般是字符串。
- 我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
JSON.stringify(value[, replacer[, space]])

JavaScript:基础扩展(1)——JSON的更多相关文章
- JavaScript基础知识(JSON、Function对象、原型、引用类型)
19.JSON 概念:JavaScript 对象表示法(JavaScript Object Notation),是一种轻量级的数据交换格式 特点:易于程序员编写和查看:易于计算机解析和生成 数据结构 ...
- 【javascript基础】 原生JSON.parse解析异常问题
[问题背景]用jQ,ajax返回json,返回的字符串如:{name:"suntiger035"},status:200,readyState:4,代码无任何问题,结果,succe ...
- 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】
一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...
- JavaScript基础笔记(十一)JSON
JSON 关于JSON,最重要的一点是理解它是一种数据格式,不是编程语言. 一.语法 JSON 不支持变量.函数或对象实例,它就是一种表示结构化数据的格式,虽然与 JavaScript 中表示数据的某 ...
- Web开发——JavaScript基础(JSON教程)
参考: JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更 ...
- javascript基础语法——词法结构
× 目录 [1]java [2]定义 [3]大小写[4]保留字[5]注释[6]空白[7]分号 前面的话 javascript是一门简单的语言,也是一门复杂的语言.说它简单,是因为学会使用它只需片刻功夫 ...
- 全栈必备 JavaScript基础
1995年,诞生了JavaScript语言,那一年,我刚刚从大学毕业.在今年RedMonk 推出的2017 年第一季度编程语言排行榜中,JavaScript 排第一,Java 第二,Python 反超 ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- 1、JavaScript 基础一 (从零学习JavaScript)
1:定义:javascript是一种弱类型.动态类型.解释型的脚本语言. 弱类型:类型检查不严格,偏向于容忍隐式类型转换. 强类型:类型检查严格,偏向于不容忍隐式类型转换. 动态类型:运行的时候执行类 ...
随机推荐
- 使用NGINX反向代理做小偷站
用Nginx的反向代理可以轻松山寨对方的网站,但是反向代理后的网站还是有对方的绝对链接时,怎么办?所以要用替换链接方法. 1 使用官方的的模块 编译参数–with-http_sub_moduleub_ ...
- python使用hbase
#coding:utf-8 __author__ = 'similarface' from multiprocessing import Process import happybase import ...
- java - day10 - TetrominoTesting
图形试验,主要 向上造型 package com.example; /** * Created by Administrator on 17-5-23. */ public class Tetromi ...
- string::find_last_of
今天在代码中用到string的这个方法,一不小心就用错了. 这是http://www.cplusplus.com/关于这个方法的解释. Find character in string from th ...
- object is not an instance of declaring class
错误原因:invoke方法的时候,应该是类的实例对象,而不是类本身 解决方法:把 PowerMockito.doReturn(index_expect).when(IndexController.cl ...
- 利用ascx输出knockoutjs的模板
项目里面的UI模板在一个页面中有2K多行了.需要增加新的UI样式.问题来了.加上js代码,几乎是变成了不可维护的状态.增加和修改都需要用ctrl+f的方式找到对应的模板,然后进行处理.很容易出错.突然 ...
- Swoole系列(二):安装
Window是没办法安装的,服务器版本建议用linux的centos7 Php版本5.4 安装步骤: 1.更新你的yum yum update 2.安装php相关扩展 2.yum install ph ...
- spring cloud使用zuul实现反向代理和负载均衡
首先,这篇文章参考的是http://blog.didispace.com/springcloud5/这位大牛的博客.本人是通过这篇博客来学习zuul的,现在写的博客只是个人在学习时个人的一些感受和理解 ...
- springmvc 环境配置图
- Android 编程之入门开发目录管理器开发抽屉与文件分类-4
在此目录管理APP里,我们能够尝试引用一些新的元素.在这里我给打击介绍一个叫抽屉的布局,QQ就用到了抽屉布局.不 过他们又在原有的基础上自己开发了新的抽屉布局.而且还蛮高大上的,顺便说说分类管理.这些 ...