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的更多相关文章

  1. JavaScript基础知识(JSON、Function对象、原型、引用类型)

    19.JSON 概念:JavaScript 对象表示法(JavaScript Object Notation),是一种轻量级的数据交换格式  特点:易于程序员编写和查看:易于计算机解析和生成 数据结构 ...

  2. 【javascript基础】 原生JSON.parse解析异常问题

    [问题背景]用jQ,ajax返回json,返回的字符串如:{name:"suntiger035"},status:200,readyState:4,代码无任何问题,结果,succe ...

  3. 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】

    一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...

  4. JavaScript基础笔记(十一)JSON

    JSON 关于JSON,最重要的一点是理解它是一种数据格式,不是编程语言. 一.语法 JSON 不支持变量.函数或对象实例,它就是一种表示结构化数据的格式,虽然与 JavaScript 中表示数据的某 ...

  5. Web开发——JavaScript基础(JSON教程)

    参考: JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更 ...

  6. javascript基础语法——词法结构

    × 目录 [1]java [2]定义 [3]大小写[4]保留字[5]注释[6]空白[7]分号 前面的话 javascript是一门简单的语言,也是一门复杂的语言.说它简单,是因为学会使用它只需片刻功夫 ...

  7. 全栈必备 JavaScript基础

    1995年,诞生了JavaScript语言,那一年,我刚刚从大学毕业.在今年RedMonk 推出的2017 年第一季度编程语言排行榜中,JavaScript 排第一,Java 第二,Python 反超 ...

  8. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  9. 1、JavaScript 基础一 (从零学习JavaScript)

    1:定义:javascript是一种弱类型.动态类型.解释型的脚本语言. 弱类型:类型检查不严格,偏向于容忍隐式类型转换. 强类型:类型检查严格,偏向于不容忍隐式类型转换. 动态类型:运行的时候执行类 ...

随机推荐

  1. 使用NGINX反向代理做小偷站

    用Nginx的反向代理可以轻松山寨对方的网站,但是反向代理后的网站还是有对方的绝对链接时,怎么办?所以要用替换链接方法. 1 使用官方的的模块 编译参数–with-http_sub_moduleub_ ...

  2. python使用hbase

    #coding:utf-8 __author__ = 'similarface' from multiprocessing import Process import happybase import ...

  3. java - day10 - TetrominoTesting

    图形试验,主要 向上造型 package com.example; /** * Created by Administrator on 17-5-23. */ public class Tetromi ...

  4. string::find_last_of

    今天在代码中用到string的这个方法,一不小心就用错了. 这是http://www.cplusplus.com/关于这个方法的解释. Find character in string from th ...

  5. object is not an instance of declaring class

    错误原因:invoke方法的时候,应该是类的实例对象,而不是类本身 解决方法:把 PowerMockito.doReturn(index_expect).when(IndexController.cl ...

  6. 利用ascx输出knockoutjs的模板

    项目里面的UI模板在一个页面中有2K多行了.需要增加新的UI样式.问题来了.加上js代码,几乎是变成了不可维护的状态.增加和修改都需要用ctrl+f的方式找到对应的模板,然后进行处理.很容易出错.突然 ...

  7. Swoole系列(二):安装

    Window是没办法安装的,服务器版本建议用linux的centos7 Php版本5.4 安装步骤: 1.更新你的yum yum update 2.安装php相关扩展 2.yum install ph ...

  8. spring cloud使用zuul实现反向代理和负载均衡

    首先,这篇文章参考的是http://blog.didispace.com/springcloud5/这位大牛的博客.本人是通过这篇博客来学习zuul的,现在写的博客只是个人在学习时个人的一些感受和理解 ...

  9. springmvc 环境配置图

  10. Android 编程之入门开发目录管理器开发抽屉与文件分类-4

    在此目录管理APP里,我们能够尝试引用一些新的元素.在这里我给打击介绍一个叫抽屉的布局,QQ就用到了抽屉布局.不 过他们又在原有的基础上自己开发了新的抽屉布局.而且还蛮高大上的,顺便说说分类管理.这些 ...