文章目录
jq-03json对象
1 对象js
三大核心:ECMA的基本语法 BOM DOM 基本语法:注释,变量,数据类型转换,流程控制,运算符,对象(页面中的标签)属性。绑定事件。
1.1 什么是对象?
函数:一段封装好的 具有特定功能的代码块。被调用时执行
生活中:对象,常有两层意思,指行动或思考时作为目标的事物或特指恋爱的对方等含义。
程序中:在计算机科学中,对象(英语:object),是一个存储器地址,其中拥有值,这个地址可能有标识符指向此处。编程中:万物皆对象。
自己创建对象。自定义对象的属性和方法。
2 JSON简介
2.1 什么是 JSON?
JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
JSON 是轻量级的文本数据交换格式 ( 前端和后台数据交互 )JSON 独立于语言:
JSON 使用 Javascript语法来描述数据对象,但是 JSON 仍然独立于语言和平台。
JSON 解析器和 JSON 库支持许多不同的编程语言。
目前非常多的动态(PHP,JSP,.NET)编程语言都支持JSON。JSON 具有自我描述性,更易理解
2.2 JSON 语法规则
跟js普通对象类似。
JSON 语法是 JavaScript 对象表示语法的子集。
数据在名称/值对中 键值对 [{key:value,key:value,key:value},{key:value,key:value,key:value}]
json对象数组 [3,5]
数据由逗号分隔大括号 {} 保存对象中括号 [] 保存数组,
数组可以包含多个对象
[{},{},{},{},{}]
2.3 数组作为 JSON 对象
JSON 数组在中括号中书写。JSON 中数组值必须是合法的 JSON 数据类型(字符串, 数字, 对象, 数组, 布尔值或 null)。JavaScript 中,数组值可以是以上的 JSON 数据类型,也可以是 JavaScript 的表达式,包括函数,日期,及 undefined。
2.4 $.each()方法
3 JSON的使用
实例:案例:市区联动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../jquery/jquery-3.4.1.js">
</script>
</head>
<body>
省:
<select name="" id="sheng">
<option value="">请选择</option>
<option value="">sdcs</option>
</select>
市:
<select name="" id="shi">
<option value="">请选择</option>
</select>
县:
<select name="" id="qu">
<option value="">请选择</option>
</select>
<script type="text/javascript">
$(function() {
china = {
"地址": [{
"省名": "河南省",
"city": [{
"市名": "郑州市",
"区名": ["中原区", "金水区"]
}, {
"市名": "新乡市",
"区名": ["红旗区", "高新区"]
}]
}, {
"省名": "河北省",
"city": [{
"市名": "河北1市",
"区名": ["河北11区", "河北12区"]
}, {
"市名": "河北2市",
"区名": ["河北21区", "河北22区"]
}]
}
]
}
let all = china.地址;
for (var i = 0; i < all.length; i++) {
let shengming = all[i].省名;
let newshneg = $("<option>" + shengming + "</option>");
$("#sheng").append(newshneg);
}
$("#sheng").on("change", function() {
$("#shi").empty()
$("#qu").empty()
let shengdian = $(this).val();
let all = china.地址;
for (var i = 0; i < all.length; i++) {
let shengming = all[i].省名;
if (shengdian == shengming) {
let shis = all[i].city;
for (var j = 0; j < shis.length; j++) {
let shiming = shis[j].市名;
let newshneg = $("<option>" + shiming + "</option>");
$("#shi").append(newshneg);
}
}
}
})
$("#shi").on("change", function() {
$("#qu").empty()
let shengdian = $(this).val();
let all = china.地址;
for (var i = 0; i < all.length; i++) {
let statu = false;
let shis = all[i].city;
for (var j = 0; j < shis.length; j++) {
let shiming = shis[j].市名;
let quming = shis[j].区名;
for (var k = 0; k < quming.length; k++) {
if (shiming == shengdian) {
// alert("sdc")
let newshneg = $("<option>" + quming[k] + "</option>");
$("#qu").append(newshneg);
statu = true;
}
}
}
if (statu) {
return;
}
}
})
})
</script>
</body>
</html>
3.1 JSON.parse()
JSON 通常用于与服务端交换数据。 在接收服务器数据时一般是字符串。 我们可以使用 JSON.parse() 方法将字符串转换为 Json 对象。 注意事项:转换的字符串的格式一定要是json格式
3.2 JSON.stringify()
JSON 通常用于与服务端交换数据。 在向服务器发送数据时一般是字符串。 我们可以使用 JSON.stringify() 方法将 Json 对象转换为字符串。