JSON(JavaScript对象表示法),它的出现让XML渐渐退出了数据交互格式的舞台。JSON是一种轻量级的数据交互格式,很多编程语言都支持对JSON的解析和序列化
* * * * *
JSON格式实际上只有两个东西:key和value,value可以表示简单值、对象、数组。
1.表示简单值
~~~
//最简单的JSON
"SunnyChuan"
~~~
<br>
2.表示对象
~~~
//JSON
{
"name":"SunnyChuan",//逗号分隔
"age":21//结尾没有分号
}
~~~
~~~
//对比JavaScript对象字面量表示
var obj={
name:"SunnyChuan",
age:21
};
~~~
通过对比可以看出,JSON的key必须用双引号括起来(单引号错误),没有末尾的分号,这两个是常见的错误。
<br>
3.表示数组
~~~
[
{
"name":"SunnyChuan",
"age":21
},
{
"name":"LuckyJing",
"age":20
}
]
~~~
<br>
4.复杂的JSON
通过对象、数组的组合,JSON可以组合成复杂的形式,数组里嵌套对象,对象里面嵌套数组等,可以通过JSON在线校验工具来测试JSON格式是否正确。http://json.cn/
<br>
5.JSON解析和序列化
解析:通过JSON.parse()将JSON数据转化为对象,eval()也可以解析JSON但是不推荐。
~~~
//myJson.json文件
{
"name":"SunnyChuan",
"age":21
}
//前端代码
window.onload=function(){
var xml=new XMLHttpRequest();
xml.onreadystatechange=function()
{
if(xml.readyState==4 && xml.status==200)
{
console.log(JSON.parse(xhr.responseText).name)//SunnyChuan
}
};
xml.open("get","myJson.json");
xml.send();
}
~~~
序列化:JSON.stringify()将JavaScript对象序列化为JSON数据格式发送给后端。
~~~
var obj={
name:"SunnyChuan",
age:21
};
//省去一些代码
xml.open("POST","ajax.php");
var data=JSON.stringify(obj);
xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xml.send(data);
~~~
后端将会接收到字符串{"name":"SunnyChuan","age":21}
<br>
JSON作为数据格式是前后端交互必用(也可以用XML)的,个人做项目的时候深深感受到了JSON带来的便利。
- html/css
- 不一样的css3之Transform
- 不一样的css3之Transition
- 不一样的css3之Animation
- Less初学
- Sass初学
- 水平垂直居中那些事
- css优先级
- css基础教学
- javascript
- 浅谈javascript事件处理程序
- cookie,localStorage,sessionStorage的区别
- Ajax
- 说说JSON
- 数组常用的方法
- 字符串常用的方法
- 闭包之我的理解
- 常用DOM操作
- 扒一扒所谓的面向对象
- JS Blob对象
- ES6学习笔记(一)
- ES6学习笔记(二)
- 用ES6书写React
- React+Redux实战总结
- 基于Express搭建开发环境
- 其他
- github初学
- 轻松配置Webpack
- asp.net学习笔记
- ado.net
- 如何使用ajax进行前后端交互
- 银行大厅自助服务系统需求分析
- 西电银行开发手册
- 接口
- ajax