Json实验

最新推荐文章于 2022-04-07 16:05:26 发布
最新推荐文章于 2022-04-07 16:05:26 发布
阅读量226 收藏
点赞数 1
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48999927/article/details/116723220
版权

实验一：

1、HTML部分

HTML部分主要定义了HTML文档的主体结构和样式，但HTML主体部分的内容还是空的，需要后面通过获取JSON文件动态添加。使用get或getJSON方法获取JSON文件中的JSON对象。

<!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>
		
		<title></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>
				<script>
					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>");
									});
								}
								$.ajax({
											          type: "GET",	//请求方式	 
											           url: "item.json",	//url地址，就是json文件的路径	 
											           dataType: "json",	//数据类型，可以是 text xml json  script  jsonp	 
											　　　　　　success: function(result){	//result是响应信息返回的结果，此处包含了返回的json对象	 
											            addBox(result);	 //调用addBox函数，将result数据添加到box容器中
											                }	 
								});
					
				</script>
		
	</head>
	<body>
		<!-- 构建装一个容器 -->
				<div id="box">
					
				</div>
				
			
								
				
	</body>
</html>

2、创建JSON文件

在和HTML相同的目录下，新建了一个名为item.json的文件，需要注意的是，url的值为图片保存的路径和文件名，内容如下：

[
{
    "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"
  }
]

实验1显示

在这里插入图片描述

实验二：

1、HTML代码主体部分

页面使用Bootstrap进行设计，但与以往不同，HTML部分只是给出了页面元素，但超链接标签的href属性值和文本内容并没有直接在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": "北京工商大学",
				"url": "http://www.btbu.edu.cn",
				"slogan": "开始追逐梦想的地方！"
			},
			{
				"name": "百度",
				"url": "http://www.baidu.com",
				"slogan": "搜索你所需要的！"
			}
		];
		$("a").each(
		function(index, element) {
						//通过设置DOM对象属性的方式设置<a>标签属性
						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="菜鸟教程"></a>
			<a href="#" class="list-group-item" target="W3School"></a>
			<a href="#" class="list-group-item" target="Uni-app"></a>
			<a href="#" class="list-group-item" target="北京工商大学"></a>
			<a href="#" class="list-group-item" target="百度"></a>
		</body>
						

		
	
</html>

2、JSON对象定义

本实例中，页面显示的文本内容和跳转的链接地址都以JSON对象的方式进行定义，以下代码定义了一个JSON对象数组。

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": "北京工商大学大学",
						"url": "http://www.btbu.edu.cn",
						"slogan": "开始追逐梦想的地方！"
					},
					{
						"name": "百度",
						"url": "http://www.baidu.com",
						"slogan": "搜索你所需要的！"
					}
				];

3、通过JSON对象设置HTML元素属性

使用JS DOM对象

$("a").each(function(index, element) {
					//通过设置DOM对象属性的方式设置<a>标签属性
					element.innerHTML=JSONObject[index].name;
					element.href=JSONObject[index].url;
					element.title=JSONObject[index].slogan;
				});

index是超链接元素集合中每个元素的索引，从0开始；element是当前元素。

实验2显示

在这里插入图片描述

。淡沫
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JSON实验三
AXN567的博客
05-19 184
输入城市名即可查询天气 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <script src="https://cdn.stati
一次关于JSONP的小实验与总结
weixin_30496431的博客
01-29 120
前言： 今天，无意间看到自己某个文件夹下有个JSONP的东西。慢慢回忆起，这个东西是之前想写的一个demo，也不知道是多久以前了，但是不知道怎么的，给忘那边了。那么，就趁这个机会把它完成吧，其实也说不上是一个demo，就是一个小实验，虽然，网上也已经有很多关于JSONP的文章和例子了，但是有些东西看看很简单，不亲自试一下总觉得不踏实。我今天为什么要实验，一方面也是经常在网上看...
json小实验
weixin_34110749的博客
08-06 96
看了汤姆大叔的博客http://www.cnblogs.com/TomXu/archive/2012/01/11/2311956.html 博客原文： 我认为很多JavaScript开发人员都错误地把JavaScript对象字面量（Object Literals）称为JSON对象（JSON Objects），因为他的语法和JSON规范里描述的一样，但是该规范里也明确地说了JSON只是一...
JSON知识总结
12-24 5163
什么是JSON： JSON：JavaScript对象表示法（JavaScript Object Notation）。 JSON是存储和交换文本信息的语法。类似 XML。 JSON比XML更小、更快，更易解析。 JSON是轻量级的文本数据交换格式；JSON独立于语言，JSON使用JavaScript语法来描述数据对象，但是JSON仍然独立于语言和平台。JSON解析器和JSON库支持许多不同的编程...
json解析总结
weixin_30527423的博客
04-18 111
JSON是JavaScript Object Notation的缩写,是一系列键值对的集合。 以下几张截图来源于网络： （感谢李志敏老师） 对于json类型的数据有两种较常用的场景： 1、将数据转换成json字符串 2、将json字符串解析成javaBean 其中，最常用的是JSONObject,JSONArray两个类，并且我们发现，在JSONObject中...
使用到json实验室v-000
02-22
介绍我们将转换之前的实验，在该实验中我们创建了自己的ProductSerializer ，改为使用to_json 。 包括了先前实验室的解决方案。大纲使用ProductSerializer替换为to_json以序列化Product 。 JSON响应中仅包含产品id ...
PowerBI 主题Json文件
10-01
3. Apothecary.json：可能采用了药房或实验室的元素，为报告带来一种专业和精确的氛围。 4. Hardcover.json：可能受到了硬皮书的启发，提供了一种经典的、正式的视觉体验。 5. Concourse.json：可能与交通枢纽或集会...
JSON.rar_JSON
09-22
在描述中的“实验”可能涉及以下几个方面： 1. JSON编码与解码：将JavaScript对象转换为JSON字符串的过程称为编码，将JSON字符串解析为JavaScript对象的过程称为解码。在JavaScript中，我们可以使用`JSON.stringify...
Android：实验项目：解析JSON数据实现天气预报显示
05-19
使用解析JSON文件获取天气预报信息，并将不同城市的天气信息显示在主界面中，应用程序运行时界面如图1所示。单击其他城市按钮时，将显示相应城市对应的天气信息，如图2所示4.在模块对应的包名下创建JSON数据对应的...
paddle比赛json文件
09-29
6. **实验配置**：GPU使用情况、多进程设置、并行计算等实验环境配置也可能包含在JSON中。 在实际操作中，参赛者需要理解JSON文件中的每一项配置，根据比赛需求调整参数，以达到最佳的模型性能。同时，为了保证代码...
JSON的学习总结（总结+源码）
05-05
服务器端将自定义的JSON字符串转换为相应的JSONObject、JSONArray，客户端对JSONObject、JSONArray进行解析
jsonp原理与实验
FisherWang_CN
02-22 202
https://blog.csdn.net/hansexploration/article/details/80314948
JQuery JSON使用实验（2）
flyroc08的博客
04-28 1084
实例预期效果 1. HTML部分 HTML部分主要定义了HTML文档的主体结构和样式，但HTML主体部分的内容还是空的，需要后面通过获取JSON文件动态添加。此外，在img目录下，还保存了用于页面展示的图片文件，大家可以自行下载一些图片保存在此目录下。 <!DOCTYPE html> <html> <head> <meta charset="utf...
第十周学习周记——JSON的几个实验
jix_Hu的博客
06-14 276
第十周学习周记前言一、实验一：通过JSON对象设置元素属性1. 代码2. 运行结果二、实验二：摄影作品1. 代码2. 运行结果三、实验三：天气预报1. 代码2. 运行结果总结 前言 上一周初步学习了JSON，这一周将通过几个实验来进一步了解JSON。 一、实验一：通过JSON对象设置元素属性 1. 代码 HTML文件代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title
json学习总结
littlecolor
01-19 1244
关于JSON，一种字符串，JS中接触过一点，但没怎么用过，这次在做教务系统时，在U层传值时，要经常用到json，那么，它跟普通的string有什么区别呢？ JSON：轻量级的数据交换格式，主要用于与服务器进行交换，具有很高的效率，例如MongoDB中就是利用Json来进行存储数据的。总之，与XML类似，在跨平台数据传输上具有很强的优势！ 以上是对JSON的一个简单的介绍，这里主要总结一下JSO
json数据解析总结
聪哥的专栏
11-29 650
现在项目用到的都是json数据交互格式。json交互的好处数据格式非常清楚。 下面主要讲json解析，封装以后再说。 最简单的格式：假设：strResult={  "status": true,  "error": null} JSONObject jsonObject = new JSONObject(strResult); boolean status=jsonObject.getBo
使用JSON文件读取数据
泡泡的博客
07-07 4294
定义 JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非常适合于服务器与 JavaScript 的交互。 格式 JSON和 XML一样，也是基于纯文本的数据格式。由于 JSON 天生是为 JavaScript 准备的，因此，JSON 的数据格式非常简单，可以用 JSON 传输一个简单的 String，Number，Boolean，
javascript中关于JSON的思考和实验，JSON的性能问题
xiao_yu_liu的博客
04-07 1639
javascript中，关于JSON的使用、理解、学习，第二个参数，如何将undefined、function和正则转换；JSON的性能问题
JSON的总结心得
一头秃发丶的博客
04-24 437
目录简介语法写法JSON值对象访问对象值循环对象JSON 对象中可以包含另外一个 JSON 对象使用点号(.)或者中括号([])来访问嵌套的 JSON 对象使用点号(.)或者中括号([])来修改 JSON 对象的值使用delete关键字来删除JSON对象的属性数组语法对象中的数组使用索引值来访问数组循环数组修改数组值使用 delete 关键字来删除数组元素JSON.parse()语法从服务端接收J...
android studio解析json数据格式文件实验
最新发布
11-25
在android studio中解析json数据格式文件是一个常见的实验，通常有两种方法可以实现这个目标。第一种方法是使用原生的JSONObject类和JSONArray类来解析json数据。首先，你需要将json数据文件导入到android studio项目中，并且利用InputStreamReader和BufferedReader等工具类来读取文件内容。然后，你可以将读取到的数据转换成JSONObject或者JSONArray对象，接着使用相关的方法来获取json中的键值对或者数组元素。 另一种方法是使用第三方库来简化json数据的解析过程，比较常用的库有Gson和Jackson等。通过添加相关的依赖，你可以轻松地将json数据映射为java对象，然后直接通过对象的属性来访问数据内容，大大简化了解析的过程。 无论是哪种方法，你需要在android studio中创建一个合适的实验项目，并且在代码中实现json数据的解析过程。你可以尝试使用一些简单的json数据格式来进行实验，比如包含一些基本数据类型和数组的json格式文件。通过不断地尝试和调试，你可以逐渐掌握如何在android studio中解析json数据格式文件，为以后的实际开发积累经验和技能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值