5.9 jq-03json对象

杵意

于 2022-01-01 11:14:52 发布

阅读量127

点赞数

分类专栏： java基础（前后端）文章标签： javascript json 前端

王锡豪

本文链接：https://blog.csdn.net/wang121213145/article/details/122208485

版权

java基础（前后端）专栏收录该内容

61 篇文章 4 订阅

订阅专栏

文章目录

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 对象转换为字符串。

3.3 读取外部JSON文件（自己扩展）

在这里插入图片描述

杵意

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
5.9 jq-03json对象

jq-03json对象第一节:对象js三大核心：ECMA的基本语法 BOM DOM 基本语法：注释，变量，数据类型转换，流程控制，运算符，对象（页面中的标签）属性。绑定事件。1.什么是对象？函数：一段封装好的具有特定功能的代码块。被调用时执行生活中：对象，常有两层意思，指行动或思考时作为目标的事物或特指恋爱的对方等含义。程序中：在计算机科学中，对象（英语：object），是一个存储器地址，其中拥有值，这个地址可能有标识符指向此处。编程中：万物皆对象。自己创建对象。自定义对象的属性和方
复制链接

扫一扫