首先JSON是一种数据格式，我们HTTP请求交互/内容存储到JSON,可以替代的方案就是XML，或者直接文本，当然首先是使用JSON或XML，其次才是文本，因为需要考虑到存储方便以及解析方便。
-
使用JSON主要是因为它轻量，各个平台语言都支持JSON交互、JSON解析和存储。
-
JSON常用于我们接口交互，前后端交互中，有解析速度快，方便的特点。
-
JSON常用于我们一些配置文件也是因为解析翻遍，JSON存储数据体积小等特征，而不像XML、PList（也是xml的一种）等格式，定义各种Dom节点（当然复杂的格式还是建议XML）。
JSON语法：
- JSON数据的书写格式是：
{key: value},[{key: value}...]。前面是键，中间是英文的“:"（冒号），然后是值。但是注意的是如果是字符串，严格来说都是英文双引号引起来的。
{"name": "张三","age": 18,"friends": ["李四","张晓儿","李宁"],"otherInfo":{"className": "高三（13）班","classTeacher": "老张"}}- JSON值范围
数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true或false）、数组（在方括号中）、对象（在花括号中）、null
- JSON文件说明
1、JSON文件的文件后缀是“.json”，如index.json。
2、JSON文件的MIME类型是“application/json”。
JSON使用：
JSON最常见的用法之一，是从web服务器上读取JSON数据（作为文件或作为HttpRequest），将JSON数据转换为JavaScript对象，然后在网页中使用该数据。
举个例子：
// 模拟后台响应返回数据
var reqJson = '{"students":['
+'{"name":"张三","age":12},'
+'{"name":"李四","age":13}]}';
// 使用JavaScript编译器eval()函数
var obj1 = eval("("+reqJson+")"); // 不建议
var obj2 = JSON.parse(reqJson); // 建议
// 不建议使用eval()解析JSON数据的原因
var reqJson = '{"students":['
+'{"name":"张三","schoolTime": 2020-20},'
+'{"name":"李四","schoolTime": 2020-20}]}';
// 使用JavaScript编译器eval()函数
var obj1 = eval("("+reqJson+")"); // 不建议 计算
var obj2 = JSON.parse(reqJson); // 建议 报错需要注意的是，在使用eval()函数时，必须把文本包围在括号中，避免语法错误。此外，还需要注意一点：eval()函数可编译并执行任何JavaScript代码，这是一个潜在的安全问题。所以不建议使用eval()解析JSON数据。可以使用JSON.parse()替代，JSON解析器只能识别JSON文本，而不会编译脚本。
详细介绍一下JSON.parse():
JSON.parse()是JavaScript中一个常用的JSON转换方法，JSON.parse()可以把JSON规则的字符串转换为JSONObject，JSON.parse()很方便，并且几乎支持所有浏览器。
JSON.parse()语法：
JSON.parse(text [, reviver])
// text: 需要被转换的字符串
// reviver: 可选参数，可以是一个回调方法
// 返回值： JSONObject举几个例子：
var jsonStr = '{"name": "李三","age":13,"account": "1602783","password": "wei1027"}';
// 案例1
JSON.parse(jsonStr);
// 输出: {name: "李三", age: 13, account: "1602783", password: "wei1027"}
// 案例2
JSON.parse(jsonStr,function(key,value){console.log(text,value);})
// 输出：undefined
// 案例3
var studentNames = [];
var str = '[{"name":"张三","age":18},{"name":"张四","age":15},{"name":"张五","age":10}]';
var obj = JSON.parse(str,function(key,value){if(key == "name"){studentNames.push(value)}});
//输出：obj->undefined,studentNames-> ["张三", "张四", "张五"]
var obj = JSON.parse(str,function(key,value){if(key == "age"){return undefined;}else{return value;}});
//输出：[{"name":"张三"},{"name":"张四"},{"name":"张五"}]
// 案例4
var str = '[{"name":"张三","age":18},{"name":"张四","age":15},{"name":"张五","age":10}]';
var obj = JSON.parse(str,function(key,value){if(key == "age"){return value+"岁"}else{return value;}});
// 输出： obj->[{"name":"张三","age":"18岁"},{"name":"张四","age":"15岁"},{"name":"张五","age":"10岁"}]详细介绍一下JSON.stringify():
JSON.stringify()是JavaScript中一个常用的内置JSON转换方法，JSON.stringify()可以把JSONObject转化为JSON规则的字符串转换为，JSON.stringify()很方便，并且几乎支持所有浏览器。
JSON.stringify()语法：
JSON.stringify(value, [,replacer[,space]])
// value: 将要序列化成一个JSON字符串的值
// replacer: 如果是一个function,那么每个序列化成JSON的value都会经过这个function;
如果是一个Array,那么序列化后的JSON字符串中的Key在这个数组中才会加入到返回的JSON字符串中去
// space: 用于美化JSON字符串，如果是一个Number类型，代表的就是多少个空格；
如果是0或者小于0，那么就是没有空格（和不填此参数没有区别），如果是字符串，那么直接填充
// 返回值: 一个JSON字符串举几个例子：
// 案例1
var json = {name:"张三",age:18};
JSON.stringify(json);
// 输出： "{"name":"张三","age":18}"// 案例2
var json= [{"name":"张三","age":18},{"name":"张四","age":15},{"name":"张五","age":10}];
JSON.stringify(json,['name','age'],'..');
JSON.stringify(json,null,'\t');
JSON.stringify() replacer参数:
- 如果类型为function，可以接收的参数有2个，第一个是Key,第二个是Value。如果返回undefined,该属性值不会在JSON字符串中输出。
- 如果类型为数组，序列化结果集的Key只输出命中的，miss的属性过滤。
Ajax获取JSON数据：
- Ajax传递JSON数据
/**
* Ajax原生的JavaScript写法分为六步：
* 1、创建Ajax request对象
* 2、绑定监听回调函数
* 3、打开一个Ajax请求
* 4、设置请求头（setRequestHeader）,按业务要求设置请求头
* 5、发送请求
* 6、接收请求
*
*/
//创建ajax request对象
var request = new XMLHttpRequest();
//绑定监听回调函数
request.onreadystatechange = function(){
//判断返回状态是否正常
if(request.readyState === 4 && request.status === 200){
//接收数据
var res = request.responseText;
//输出数据
console.log("返回值",res);
}else{
console.err("错误！error!");
}
}
/**
*打开请求
*第一个参数为请求方式，可选GET、POST、DELETE、UPDATE、OPTIONS等。
*第二个参数为请求的链接，可以是相对路径和绝对路径。
*第三个参数设置请求为同步还是异步，true为异步，false为同步。
*/
request.open("POST", "https://cdn.yinshua86.com/file/demo-json.json",true);
//设置请求头，下面设置为表单提交
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
/**
*发送请求
*GET请求方式：rquest.send();
*POST请求方式：可以传参，可以是字符型的JSON或者？和&方式如下：
*requset.send("name=Alice&age=23");
*//这个方式如果后端接收不到参数，请把请求头改成"Content-type","application/json"
*/
//发送请求
requset.send(JSON.stringify({name:"Alice",age:23}));- Ajax接收JSON数据
/**
* Ajax原生的JavaScript写法分为六步：
* 1、创建Ajax request对象
* 2、绑定监听回调函数
* 3、打开一个Ajax请求
* 4、设置请求头（setRequestHeader）,按业务要求设置请求头
* 5、发送请求
* 6、接收请求
*
*/
//创建ajax request对象
var request = new XMLHttpRequest();
//绑定监听回调函数
request.onreadystatechange = function(){
//判断返回状态是否正常
if(request.readyState === 4 && request.status === 200){
//接收数据
var res = request.responseText;
//输出数据
console.log("返回值",res);
//如果返回来的参数是JSON，就可以直接转换
var json = JSON.parse(res);
console.log('返回值-转换JSON对象',json);
}else{
console.err("错误！error!");
}
}
/**
*打开请求
*第一个参数为请求方式，可选GET、POST、DELETE、UPDATE、OPTIONS等。
*第二个参数为请求的链接，可以是相对路径和绝对路径。
*第三个参数设置请求为同步还是异步，true为异步，false为同步。
*/
request.open("POST", "https://cdn.yinshua86.com/file/demo-json.json",true);
//设置请求头，下面设置为表单提交
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
/**
*发送请求
*GET请求方式：rquest.send();
*POST请求方式：可以传参，可以是字符型的JSON或者？和&方式如下：
*requset.send("name=Alice&age=23");
*//这个方式如果后端接收不到参数，请把请求头改成"Content-type","application/json"
*/
//发送请求
requset.send(JSON.stringify({name:"Alice",age:23}));jQuery Ajax与JSON：
| 名称 | 类型 | 规则说明 |
|---|---|---|
| url | string | 请求连接，可以是相对路径或者是绝对路径 |
| cache | Boolean | 是否缓存，默认true,false为不缓存 |
| type | string | 请求方式，get、post、put、delete、update、option |
| data | String/JSON | 请求的参数，可以是&拼接的方式或者JSON对象提交方式 |
| dataType | string | 预期返回的类型，可选值有，json、xml、html、script、jsonp、text |
| success | Function | 成功回调的方法 |
| errot | Function | 失败回调的方式 |
$.ajax({
url: "https://cdn.yinshua86.com/file/demo-json.json",
cache: false,
type: "get",
data: {"name":"Alice","age":23},
dataType: 'json',
success: function(json){
console.log("返回值-转换JSON对象",json);
},
error: function(e){
//错误信息
console.log(e.message);
}
});
1057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
