HTML CSS JAVASCRIPT 学习周记第九周

最新推荐文章于 2024-11-17 08:26:26 发布

原创最新推荐文章于 2024-11-17 08:26:26 发布 · 273 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了如何在HTML中使用JavaScript创建和操作JSON对象，包括定义对象、访问属性，并展示了通过AJAX从JSON文件获取数据动态渲染实例。此外，还详细讲解了JSON的基本语法规则，以及如何在实际项目中利用JSON存储和交换数据。

HTML CSS JAVASCRIPT 学习周记第九周

JSON
JSON: JavaScript Object Notation(JavaScript 对象表示法)

JSON 是存储和交换文本信息的语法，类似 XML。

JSON 比 XML 更小、更快，更易解析。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h2>JavaScript 创建 JSON 对象</h2>
<p>
网站名称: <span id="jname"></span><br /> 
网站地址: <span id="jurl"></span><br /> 
网站 slogan: <span id="jslogan"></span><br /> 
</p>
<script>
var JSONObject= {
	"name":"菜鸟教程",
	"url":"www.runoob.com", 
	"slogan":"学的不仅是技术，更是梦想！"
};
document.getElementById("jname").innerHTML=JSONObject.name 
document.getElementById("jurl").innerHTML=JSONObject.url 
document.getElementById("jslogan").innerHTML=JSONObject.slogan 
</script>

</body>
</html>

JSON 语法规则
JSON 语法是 JavaScript 对象表示语法的子集。

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

访问对象值
你可以使用点号（.）来访问对象的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>你可以使用点号（.）来访问 JSON 对象的值：</p>

<p id="demo"></p>

<script>

var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj.name;
document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

实验2




<!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>

[
  {
    "name":"桥",
    "address":"地址1",
    "author":"作者1",
    "url":"./img/1.jpg"
  },
 
  { 
    "name":"大海星",
    "address":"地址1",
    "author":"作者2",
    "url":"./img/2.jpg"
  },
 
  {
    "name":"海滨日落",
    "address":"地址1",
    "author":"作者3",
    "url":"./img/3.jpg"
  },
 
  {
    "name":"日出",
    "address":"地址1",
    "author":"作者4",
    "url":"./img/4.jpg"
  },
 
  {
    "name":"桂林山水甲天下",
    "address":"地址1",
    "author":"作者5",
    "url":"./img/5.jpg"
  },
 
  {
    "name":"花田中的木屋",
    "address":"地址1",
    "author":"作者6",
    "url":"./img/6.jpg"
  }
]

标签

#js

HTML CSS JAVASCRIPT 学习周记 第九周

HTML CSS JAVASCRIPT 学习周记 第九周

HTML CSS JAVASCRIPT 学习周记第九周

HTML CSS JAVASCRIPT 学习周记第九周