json2.js 入门教程之使用方法与实例分析
编程学习 2021-07-04 17:32www.dzhlxh.cn编程入门
这篇文章主要介绍了json2.js 入门教程之使用方法与实例分析,需要的朋友可以参考下
json2.js主要功能是做什么的？
json2.js提供了json的序列化和反序列化方法，可以将一个json对象转换成json字符串，也可以将一个json字符串转换成一个json对象。
json2.js在浏览器不支持json.parse的内置方法时，最有效。json2.js会创建一个内部的全局变量，提供json对象与字符串之间的转换。
由于eval已经不提倡使用了，并存在一定的危险，建议使用内置parse json的方法，或者直接使用json2.js。
json2.js的源码地址：
Visual Studio用户可以直接通过Nuget来获得。
使用方法很简单：
1、引用json2.js：
<script type="text/javascript" src="/CoreResource/JS/json2.min.js"></script>
2、JSON.stringify() 序列化方法
方法用于将javaScript 的json数据转化为json格式的文本串。主要用于向服务端返回数据。
var jsonObj = { "id": "01", "name": "Tom" };
JSON.stringify(jsonObj);
3、JSON.parse()反序列化方法
var jsonString = {"id": "01", "name": "Tom" };
JSON.parse(jsonString);
用于将json格式的文本串转化为javaScript 的json数据，例如:
var records =
{
"table": "GPS_MANAGER",
"token": "32sdfj-349sfdnfs32-fsdf348imfg323-df34",
"pk": "GPS_LONGITUDE,GPS_LATITUDE",
"rows": [
{
"type": "modify",
"columns": [
{
"GPS_LONGITUDE": "GPS_LONGITUDE",
"old": "",
"new": "112.9152287"
},
{
"GPS_LATITUDE": "GPS_LATITUDE",
"old": "",
"new": "22.6689977"
},
{
"GPSMARK": "GPSMARK",
"old": "",
"new": "1"
},
{
"RTUNAME": "RTUNAME",
"old": "",
"new": "大边岩站"
},
{
"RTUID": "RTUID",
"old": "",
"new": "13525"
},
{
"NOTE": "NOTE",
"old": "",
"new": "undefined"
},
{
"Y": "Y",
"old": "",
"new": "2508146.500000"
},
{
"X": "X",
"old": "",
"new": "696776.812500"
},
{
"GPS_HEIGHT": "GPS_HEIGHT",
"old": "",
"new": "0"
},
{
"GPS_GUID": "GPS_GUID",
"old": "",
"new": "1381c526-2d90-442f-889c-731485a960c1"
}
]
}
]
}
var jsonObj = JSON.parse(records );
然后就可以通过前端javascript代码解析json文本传递过来的数据，json是一种以key:value的复合格式存储数据的协议，这样简化了数据传递量，比较xml更能减轻客户端负载。
但是个人感觉json数据格式没有xml文件那样一目了然！
3. Json验证工具
(1). Json文本在线验证工具JSONLint：http://jsonlint.com/
通过此在线工具验证json格式文本串是否符合json数据格式。
狼蚁网站SEO优化是其他网友的补充
需要加载json2.js
这是个人在最近使用json时做的总结，拿出来给没接触过的小弟们晒晒，适用与没接触过json的人员，其中json2。js请到json官网下载。
<script>
//直接声明json数据结构
var myJSONObject = {"bindings": [
{"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
{"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
{"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
]
};
//声明字符串,可对比一下json文本与我们正常文本的区别
var normalstring='[{persons:[{name:"jordan",sex:"m",age:"40"}, {name:"bryant",sex:"m",age:"28"}, {name:"McGrady",sex:"m",age:"27"} ]}]';
var jsontext='[{"persons":[{"name":"jordan","sex":"m","age":"40"}, {"name":"bryant","sex":"m","age":"28"}, {"name":"McGrady","sex":"m","age":"27"} ]}]';
//调用eval函数转换为json对象，
var myE = eval(normalstring);
document.writeln(myE '<br><br>');
//将json对象转换为字符串
var text = JSON.stringify(myE);
//对比转换后的json文本与声明的文本区别
document.writeln('转换后的json文本：' text '<br><br>声明的json格式文本' jsontext '<br><br>声明的普通格式文本' normalstring '<br><br>');
//当安全比较重要的时候使用JSON解析就好一些。JSON解析只会识别JSON文本并且它更安全,狼蚁网站SEO优化调用json的parse函数对文本数据转换生成json数据结构
var myData = JSON.parse(jsontext);
document.writeln(myData '<br><br>');
//狼蚁网站SEO优化是对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);
</script>
3、增强功能：
比如说，我们的数据非常复杂，还有类似头像，昵称，个人签名之类的信息。
可是我保存在本地，只需要用户名，和性别，肿么破呢？
也许你会说 so easy, 遍历数据重新提取下即可。
例如：
data = [
{name: , sex:, age: },
{name: , sex:, age: },
{name: , sex:, age: }
]; ( i=, new_data=[]; i<data.length; i++) {
new_data.push({
name: data[i].name,
sex: data[i].sex
});
} str_json = .stringify(new_data);
console.log(str_json);
var data = [
{name: "王尼玛", sex:1, age: 30},
{name: "王尼美", sex:0, age: 20},
{name: "王大锤", sex:1, age: 30}
];
for (var i=0, new_data=[]; i<data.length; i++) {
new_data.push({
name: data[i].name,
sex: data[i].sex
});
}
var str_json = JSON.stringify(new_data);
console.log(str_json);
确实分分钟搞定。
其实我们只需要用 stringify 第二个参数即可简单处理这种问题。
data = [
{name: , sex:, age: },
{name: , sex:, age: },
{name: , sex:, age: }
]; str_json = .stringify(data, [, ]);
console.log(str_json);
var data = [
{name: "王尼玛", sex:1, age: 30},
{name: "王尼美", sex:0, age: 20},
{name: "王大锤", sex:1, age: 30}
];
var str_json = JSON.stringify(data, ["name", "sex"]);
console.log(str_json);
第二个参数只要传入需要的keys数组，就非常轻松的就完成这种处理了。
当然如果我们要更纠结的处理，比如要把 1,0 修改为男女，那么第二个参数可以用回调函数来处理。
data = [
{name: , sex:, age: },
{name: , sex:, age: },
{name: , sex:, age: }
]; str_json = .stringify(data,
(k === ) { [, ][v];
} v;
});
console.log(str_json);
var data = [
{name: "王尼玛", sex:1, age: 30},
{name: "王尼美", sex:0, age: 20},
{name: "王大锤", sex:1, age: 30}
];
var str_json = JSON.stringify(data, function (k, v) {
if (k === "sex") {
return ["女", "男"][v];
}
return v;
});
console.log(str_json);
第二个参数如此强悍，为我们省去了不少麻烦。