JSON简介
1. JAVAScript Object Notation是一种轻量级的数据交换格式
2. 具有良好的可读和便于快速编写的特性。
3. 业内主流技术为其提供了完整的解决方案（有点类似于正则表达式 ，获得了当今大部分语言的支持）
4. JSON采用兼容性很高的文本格式，同时也具备类似于C语言体系的行为。
5. JSON是目前网络中主流的数据传输格式之一，应用十分广泛。
JSON支持的数据类型
我们要学习使用JSON解析，必须对JSON解析的规则原理有深刻的认识和了解，然后才知道它的一个实现原理
JSON里面的数据是以一种键值对的方式存在
（”key”:”value”）中值的类型可以是下面数据类型中的任意一种：
1. 数字（整数或浮点数）
2. 逻辑值（true 或 false）
3. 字符串（在双引号中）
4. null
5. 数组（在方括号中）
6. 对象（在大括号中）
JSON语法规则
JSON的语法规则非常的简单，就是使用
大括号’{}’，
中括号’[]’，
逗号’，’，
冒号’：’，
双引号’“”’。
我们在JSON解析中只有三中情况出现
1.｛｝ 解析’大括号’类型
2. [ ] 解析’中括号’类型
3. 其实只有两种，第三种则是1与2的组合方法，即”｛’name’:’李文豪’ ，’hobby’:[‘编程’,’电竞’,’睡觉’]｝”
JSON基本语法
Object(对象类型)
用{ }包含一系列无序的key–Value键值对表示，其中Key和Value之间用冒号分割，每个key-value之间用逗号分割。
比如：
`json{
"jsonObj" : { "name" : "李文豪","age" : 24}
}`Array(数组类型)
使用[ ]包含所有元素，每个元素用逗号分隔，元素可以是任意的值
比如：
`json {
"jsonArr" : ["编程","电竞","睡觉"]
｝`组合形
`json {
"name" : "李文豪",
"age" : 24,
"jsonObj" : { "name" : "李文豪","age" : 24},
"jsonArr" : ["编程","电竞","睡觉"]
}`
注意事项:
1. JSON的值必须是字面量形式, 不允许使用变量或其它形式
2. JSON中不允许直接写注释
3. JSON格式的文本,文件后缀必须是: `json`
4. JSON文本的MIME类型必须是: `application/json`
JSON实战练习
从服务器端获取JSON格式字符串并在前端页面中显示
JavaScript代码
let btn = document.getElementsByTagName('button').item(0);
let request = new XMLHttpRequest();
btn.addEventListener('click', getData, false);
function getData() {
request.addEventListener('readystatechange', show, false);
request.open('get', 'admin/demo1.php', true);
request.send(null);
}
function show() {
if (request.readyState === 4) {
var h3 = document.getElementsByTagName('h3').item(0);
var obj = JSON.parse(request.responseText);
h3.innerHTML = obj.name + ',PHP成绩是: ' + obj.grade.php + ',最喜欢: ' + obj.hobby[1];
}
}
表单验证之JSON方式数据传递
JavaScript代码
function F_verify($user_Info, $result_Tip) {
request_Temp.onreadystatechange = function(){
if (request_Temp.readyState === 4 && request_Temp.status === 200) {
let obj = JSON.parse(request.responseText);
switch (obj.status) {
case 1:
$result_Tip.style.color = 'red';
$result_Tip.innerHTML = obj.message;
break;
case 2:
$result_Tip.style.color = 'red';
$result_Tip.innerHTML = obj.message;
break;
case 3:
$result_Tip.style.color = 'green';
$result_Tip.innerHTML = obj.message;
break;
}
}
return false;
};
request_Temp.open('post','admin/check.php',true);
request_Temp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
let request_Temp = new XMLHttpRequest();
request_Temp.send(data_Temp);
}