json和XML很像，但它具有更快，更小，阅读性强等优点。不多说，直接来例子：

<html>
<body>
<h2>通过 JSON 字符串来创建对象</h3>
<p>
First Name: <span id="fname"></span><br />
Last Name: <span id="lname"></span><br />
</p>
<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"George","lastName":"Bush" },' +
'{"firstName":"Thomas","lastName":"Carter" }]}';

Var test={"people":[
{"name":"zhoudachuang","age":22},
{"name":"zhangpengpeng"},
{"name":"zhanghua","age":28,"adress":"123"}]};//每个对象的属性值个数可以不一样

//由于 JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。
eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：
var obj = eval ("(" + txt + ")");//将json文本转换成javascript对象

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

可以把这段代码直接粘贴，然后执行看效果。

下面是一个json的扩展用法

//对json对象的增删查改操作

//声明json对象

var jsonObj2={persons:[{name:"jordan",sex:"m",age:"40"}, {name:"bryant",sex:"m",age:"28"}, {name:"McGrady",sex:"m",age:"27"} ]};

var persons=jsonObj2.persons;
var str="";

var person={name:"yaoMing",sex:"m",age:"26"};
//以下为json对象的操作，去掉注释可以查看操作结果
//jsonObj2.persons.push(person);//数组最后加一条记录

下面的就不上图了

//jsonObj2.persons.pop();//删除最后一项
//jsonObj2.persons.shift();//删除第一项
jsonObj2.persons.unshift(person);//数组最前面加一条记录 只要适合Javascript的方法都是可以用在JSON对象的数组中的！所以还有另外的方法splice( )进行crud操作！ //删除
//jsonObj2.persons.splice(0,2);//开始位置,删除个数
//替换不删除
var self={name:"tom",sex:"m",age:"24"};
var brother={name:"Mike",sex:"m",age:"29"};
jsonObj2.persons.splice(1,0,self,brother,self);//开始位置,删除个数,插入对象
//替换并删除
//jsonObj2.persons.splice(0,1,self,brother);//开始位置,删除个数,插入对象

for(var i=0;i<persons.length;i++){ var cur_person=persons[i]; str+=cur_person.name+"'sex is "+cur_person.sex+" and age is "+cur_person.age+"<br><br>"; }
document.writeln(str);
//转换为json文本
var myjsonobj = JSON.stringify(jsonObj2);
document.writeln(myjsonobj);

JSON入门实例的更多相关文章

  1. Vue.js2.0从入门到放弃---入门实例

    最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用 ...

  2. SpringMVC详解（三）------基于注解的入门实例

    前两篇博客我们讲解了基于XML 的入门实例,以及SpringMVC运行的详细流程.但是我们发现基于 XML 的配置还是比较麻烦的,而且,每个 Handler 类只能有一个方法,在实际开发中肯定是不可能 ...

  3. 转载 SpringMVC详解（三）------基于注解的入门实例

    目录 1.在 web.xml 文件中配置前端处理器 2.在 springmvc.xml 文件中配置处理器映射器,处理器适配器,视图解析器 3.编写 Handler 4.编写 视图 index.jsp ...

  4. 转-Vue.js2.0从入门到放弃---入门实例（一）

    http://blog.csdn.net/u013182762/article/details/53021374 标签: Vue.jsVue.js 2.0Vue.js入门实例Vue.js 2.0教程 ...

  5. log4j 2 入门实例（1）

    本文介绍log4j的基本概念和将日志输出到控制台的例子. 参考文章: http://www.jianshu.com/p/464058bdbc76 http://www.hankcs.com/progr ...

  6. TypeScript入门实例

    前言 TypeScript是JavaScript的超集,微软公司开发,利用es6语法,实现对js的面向对象编程思想,写代码的时候会像强类型语言一样,指定参数类型.返回值类型,类型不对会报错,但编译后还 ...

  7. springboot + kafka 入门实例 入门demo

    springboot + kafka 入门实例 入门demo 版本说明 springboot版本:2.3.3.RELEASE kakfa服务端版本:kafka_2.12-2.6.0.tgz zooke ...

  8. Vue项目入门实例

    前言 本文记录Vue2.x + Element-UI + TypeScript语法入门实例 为什么要用TypeScript? 1.TypeScript是JavaScript的超集,利用es6语法,实现 ...

  9. Python导出Excel为Lua/Json/Xml实例教程（三）：终极需求

    相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出Excel为Lua/Json/Xml实例教程(二):xlrd初体验 Python导出E ...

随机推荐

  1. 修改ECSHOP后台的商品列表里显示该商品品牌

    如何在在ECSHOP后台的商品列表中也显示商品的品牌”.下面就来最模板讲一下如何来修改.此方法只保证在ECSHOP2.7.2版本下有效,其他版本请参照修改. 第一步:首先我们来打开程序文件: /adm ...

  2. bianwu | 数据行 | 填写意见

    protected void gv1_RowDataBound(object sender, GridViewRowEventArgs e) { //首先判断是否是数据行 if (e.Row.RowT ...

  3. JAVA导出数据到excel中大数据量的解决方法

    最近在做项目功能时 ,发现有20万以上的数据.要求导出时直接导出成压缩包.原来的逻辑是使用poi导出到excel,他是操作对象集合然后将结果写到excel中. 使用poi等导出时,没有考虑数据量的问题 ...

  4. [Ogre][地形]OgreTerrain分析以及使用

    Ogre 1.7.2中的地形教程 ○读者可以对照着Ogre1.7.2中的terrain.h源码进行阅读加深理解,蓝色部分均为源码 ○去除了一些具体场景比如添加mesh,设置setAmbientLigh ...

  5. 过滤器（Filter）案例：检测用户是否登陆的过滤器

    *****检测用户是否登陆的过滤器:不需要用户跳转到每个页面都需要登陆,访问一群页面时,只在某个页面上登陆一次,就可以访问其他页面: 1.自定义抽象的 HttpFilter类, 实现自 Filter ...

  6. The 3n + 1 problem 分类： POJ 2015-06-12 17:50 11人阅读 评论(0) 收藏

    The 3n + 1 problem Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 53927   Accepted: 17 ...

  7. Poj(2349)，最小生成树的变形

    题目链接:http://poj.org/problem?id=2349 Arctic Network Time Limit: 2000MS   Memory Limit: 65536K Total S ...

  8. PostgreSql安装

    官网:http://www.postgresql.org/download/linux/redhat/ 一.安装 由于我的机子是centos6.2,所以选择RedHat的. 按照官网所说的进行安装: ...

  9. Python类的定义与使用

    #! /usr/bin/python # Filename:objvar.py class Person: '''Represents a person.''' population = 0 def ...

  10. NSIS学习记录の----NSIS多语言安装以及详解

    NSIS多语言安装,很多教程提供了详细的代码,但是代码中某些语句的含义我还是不很明白,作为一个吃螃蟹的人,我做一个解释,避免很多小伙伴和我哟U一样的误区,以下结论都是自己根据实践得来,若发现理解错误, ...