第九周周记

最新推荐文章于 2022-04-25 16:07:03 发布

Michael681

最新推荐文章于 2022-04-25 16:07:03 发布

阅读量280

点赞数

本文链接：https://blog.csdn.net/Michael681/article/details/118070291

版权

第九周周记

前言
一、什么是JSON
二、语法
三、JSON 使用 JavaScript 语法
四、实验一
五、实验二

前言

本周将学习JSON

一、什么是JSON

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation） JSON 是轻量级的文本数据交换格式 JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。 JSON 具有自我描述性，更易理解

二、语法

JSON 语法是 JavaScript 语法的子集。

数据在名称/值对中；
数据由逗号分隔；
大括号“{}”保存对象；
中括号“[]”保存数组，数组可以包含多个对象。

key 和 value 中使用冒号(:)分割。
每个 key/value 对使用逗号(,)分割。

三、JSON 使用 JavaScript 语法

因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON

<body>
<h2>JavaScript 创建 JSON 对象</h2>
<p>第一个网站名称: <span id="name1"></span></p> 
<p>第一个网站修改后的名称: <span id="name2"></span></p> 

<script>
var sites = [
	{ "name":"runoob" , "url":"www.runoob.com" }, 
	{ "name":"google" , "url":"www.google.com" }, 
	{ "name":"微博" , "url":"www.weibo.com" }
];

document.getElementById("name1").innerHTML=sites[0].name;

sites[0].name="菜鸟教程";
document.getElementById("name2").innerHTML=sites[0].name;
</script>

结果是网站名称runoob修改为菜鸟教程

四、实验一

HTML部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery JSON实例 - 通过JSON对象设置元素属性</title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script>
			$(document).ready(function(){ 
			var JSONObject = [
									{
										"name": "菜鸟教程",
										"url": "http://www.runoob.com",
										"slogan": "学的不仅是技术，更是梦想！"
									},
									{
										"name": "W3School",
										"url": "http://www.w3school.com.cn",
										"slogan": "领先的Web技术教程！"
									},
									{
										"name": "Uni-app",
										"url": "https://uniapp.dcloud.io",
										"slogan": "为开发者而生，简单易用的跨平台前端框架！"
									},
									{
										"name": "XXXX大学",
										"url": "http://www.btbu.edu.cn",
										"slogan": "开始追逐梦想的地方！"
									},
									{
										"name": "百度",
										"url": "http://www.baidu.com",
										"slogan": "搜索你所需要的！"
									}
								];
								$("a").each(function(index, element) {
									element.innerHTML=JSONObject[index].name;
									element.href=JSONObject[index].url;
									element.title=JSONObject[index].slogan;
								});
								 });
				</script>
	</head>
	<body>
		<a href="#" class="list-group-item active" target="_blank"></a>
		<a href="#" class="list-group-item" target="_blank"></a>
		<a href="#" class="list-group-item" target="_blank"></a>
		<a href="#" class="list-group-item" target="_blank"></a>
		<a href="#" class="list-group-item" target="_blank"></a>

	</body>


</body>
</html>

结果
在这里插入图片描述

五、实验二

HTML部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script>  $.ajax({	 
	                type: "GET",	 
	                url: "new_file.json",	
	                dataType: "json",	
	　　　　　　　　　success: function(result){	
	                    addBox(result);	 
	                }	 
	            });
				function addBox(result) {
									//result是Json对象的集合,通过JQuery的each方法进行遍历，为每个对象生成div元素
									$.each(result, function(index, obj) {
										//添加一个class为product的容器，放置产品信息
										$("#box").append("<div class='product'>" + 
										
											//获得图片地址
											"<div><img class='img' src='" + obj['url'] + "'></div>" +
											
											//获得名字
											"<div class='p1 p'>" + obj['name'] + "</div>" +
											
											//获得地址
											"<div class='p2 p'>" + obj['address'] + "</div>" +
				
											//获得作者
											"<div class='p3 p'>" + obj['author'] + "</div>" +
				
											"</div>");
									});
								}
</script>
		<title>JSON示例</title>
		<style type="text/css">
			.p {			
				display: inline-block;			
				float: left;			
				width: 50%;			
				font-family: Microsoft YaHei;			
			}
			
			.p1 {
				font-size: 14px;
				color: #000;
				margin-top: 16px;
			}

			.p2 {
				font-size: 12px;
				color: #b0b0b0;
			}

			.p3 {
				font-size: 14px;
				color: #ff5f19;
			}

			.product {
				width: 100%;
				position: relative;
				margin: 20px 0 5px 0;
				height: 100px;
				background: #fafafa;
			}

			.img {
				width: 100px;
				height: 100px;
				float: left;
				margin-right: 20px;
			}
		</style>
	</head>
	<body>
		
		<div id="box">
			
		</div>
	</body>
</html>

JSON部分

[
  {
    "name":"缤纷方块",
    "address":"kkt",
    "author":"Light",
    "url":"./1.jpg"
  },
 
  { 
    "name":"命运之轮",
    "address":"kkt",
    "author":"Light",
    "url":"./2.jpg"
  },
 
  {
    "name":"天空幻境",
    "address":"kkt",
    "author":"Light",
    "url":"./3.jpg"
  },
 
  {
    "name":"幽静森林",
    "address":"kkt",
    "author":"Light",
    "url":"./4.jpg"
  },
 
  {
    "name":"圣湖",
    "address":"kkt",
    "author":"Light",
    "url":"./5.jpg"
  },
 
  {
    "name":"海底世界",
    "address":"kkt",
    "author":"Light",
    "url":"./6.jpg"
  }
]

结果
在这里插入图片描述

Michael681

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第九周周记

第十周周记前言一、什么是JSON二、语法前言本周将学习JSON一、什么是JSONJSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）JSON 是轻量级的文本数据交换格式JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。JSON 具有自我描述性，更易
复制链接

扫一扫