目录
JSON 概述 与 语法
JSON 对象 CRUD
对象创建 与 添加属性
删除属性
修改属性
查询 与 遍历
JSON. parse() 、JSON. stringify()
异常处理:XML Parsing Error:not well-formed
JSON 概述 与 语法
1、JSON(JavaScriptObject Notation)--JS对 象导航,是一种轻量级的数据交换格式
2、JSON采用完全独立于语言的文本格式,是理想的数据交换语言,易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。
3、在 JavaScript 中处理 JSON 数据不须要任何特殊的 API 或工具包,可以直接使用
4、Java 后台操作Json 较常用的类库有:net-sf-Json、Gson、Jackson、FastJson等,其中Gson 与FastJson无疑是其中的佼佼者之一
JSON 语法
1、JSON 语法是 JavaScript 对象表示语法的子集,可以直接使用。
2、一个花括号表示一个JSON对象,{}表示一个JSON对象,[{}] 表示json数组
3、键与值用冒号分隔,每个数据之间用逗号分隔;
4、使用方括号保存 JSON 数组,数组值使用“,”分割;
5、JSON 数据使用’”键”:”值”’ 形式,其中键名必须是字符串,而值 可以是以下任意类型:1)数值(整数,浮点数)2)字符串(在双引号中)3)逻辑值(true/false)4)数组(在方括号中)5)对象(在花括号中)
JSON 对象 CRUD
1、在 Java 后台使用 Gson、FastJson 等库来操作 JSON 是非常方便的,前台 JS 中有时也需要进行 创建JSON对象,然后 增加、修改、删除、查看等操作。
对象创建 与 添加属性
1、json 对象创建:var jsonObj = {} ;
2、添加属性时,如果key已经存在,则直接覆盖
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,BootCDN官网地址:/--><script src="/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">// 创建一个空的json对象let jsonObj1 = {};//添加属性与取值相对应,同样是两种方式,推荐第二种 []jsonObj1.name = "华安";jsonObj1["age"] = 35;console.log("jsonObj1:" + JSON.stringify(jsonObj1));</script></head><body></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,BootCDN官网地址:/--><script src="/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">// 创建一个空的数组对象,用于存放 json 对象let jsonArray = [];for (let i = 0; i < 2; i++) {let jsonObj = {};// json 对象操作属性推荐方式["key"],不用".key"jsonObj["name"] = "华安" + i;jsonObj["age"] = 35;// 数组对象也是js内置的对象,push方法为数组添加元素jsonArray.push(jsonObj);}console.log("jsonObj:"+JSON.stringify(jsonArray));</script></head><body></body></html>
删除属性
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,BootCDN官网地址:/--><script src="/jquery/3.3.1/jquery.min.js"></script><style type="text/css"></style><script type="text/javascript">let json1 = {"name": "华安", "age": 35};console.log(JSON.stringify(json1));// 删除name属性delete json1.name;console.log(JSON.stringify(json1));// 删除age属性delete json1["age"];console.log(JSON.stringify(json1));</script></head><body></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,BootCDN官网地址:/--><script src="/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">let json2 = [{"name": "华安", "age": 35}, {"name": "宁王", "age": 55}];console.log(JSON.stringify(json2));// 删除json数组第一个json对象的name属性delete json2[0].name;console.log(JSON.stringify(json2));// 删除json数组第二个json对象的age属性delete json2[1]["age"];console.log(JSON.stringify(json2));</script></head><body></body></html>
修改属性
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,BootCDN官网地址:/--><script src="/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">let json2 = [{"name": "华安", "age": 35}, {"name": "宁王", "age": 55}];console.log(JSON.stringify(json2));// 为json对象添加属性时,如果属性已经存在,在直接覆盖json2[0]["name"] = "华太师";json2[1]["age"] = "66";console.log(JSON.stringify(json2));</script></head><body></body></html>
查询 与 遍历
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,BootCDN官网地址:/--><script src="/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">let json2 = [{"name": "华安", "age": 35, "isMarry": true, "addr": null}, {"name": "宁王", "age": 55, "addr": "西湖"}];console.log(JSON.stringify(json2));let loopJsonObj = null;// 循环json 数组对象for (let i = 0; i < json2.length; i++) {// 取 json 对象loopJsonObj = json2[i];// json 对象取值,[key]、.key两种方式; key 不存在时返回 undefinedconsole.log(loopJsonObj["name"] + ":" + loopJsonObj.age + ":" + loopJsonObj["isMarry"] + ":" + loopJsonObj["addr"]);}</script></head><body></body></html>
json 对象遍历:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,BootCDN官网地址:/--><script src="/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">//json 对象 遍历var json2 = {"name": "华安", "age": 35, "isMarry": true, "addr": null};for (var key in json2) {console.log(key + "=" + json2[key]);}</script></head><body></body></html>
JSON. parse() 、JSON. stringify()
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,BootCDN官网地址:/--><script src="/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">// 手写一个具有json格式的字符串,此时里面value无论什么类型,都必须加双引号let jsonStr = "{\"id\":\"9527\",\"name\":\"华安\",\"isMarry\":\"true\"}";// 将json字符串转换json对象let jsonObj = JSON.parse(jsonStr);console.log(jsonObj["id"] + "::" + jsonObj["name"]+"::"+jsonObj["isMarry"]);</script></head><body></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,BootCDN官网地址:/--><script src="/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">let json1 = {"name": "华安", "age": 35};let json2 = [{"name": "华安", "age": 35}, {"name": "宁王", "age": 55}];// 将json 对象转为 json 字符串let jsonStr1 = JSON.stringify(json1);// 将json 数组转为 json 字符串let jsonStr2 = JSON.stringify(json2);console.log("jsonStr1:"+jsonStr1);console.log("jsonStr2:"+jsonStr2);</script></head><body></body></html>