AJAX访问JSON

最新推荐文章于 2024-03-27 00:06:53 发布
最新推荐文章于 2024-03-27 00:06:53 发布
阅读量500 收藏 1
点赞数
文章标签： ajax json 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mtm001/article/details/122660911
版权 
{
	"topic": "MotoGP Racing",
	"subject": "Top 10 Rider Statistics",
	"source": "Wikipedia",
	"sourceUrl": "https://en.wikipedia.org/wiki/List_of_500cc/MotoGP_Motorcycle_World_Champions#Multiple_champions",
	"riderStats": [
		{
			"name": "Giacomo Agostini",
			"rank": "1",
			"wins": 122,
			"starts": 223,
			"link": "https://en.wikipedia.org/wiki/Giacomo_Agostini"
		}, {
			"name": "Valentino Rossi",
			"rank": "2",
			"wins": 89,
			"starts": 369,
			"link": "https://en.wikipedia.org/wiki/Valentino_Rossi"
		}
	]
}
<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Insert title here</title>
		<style>
			*{
				margin: 0 auto;
				padding: 0;
				text-align: center;
			}
			
			table,tr,th,td{
				border: 1px solid #808080;
				border-collapse: collapse;
			}
			.app{
				margin: 0 auto;
				
			}
			#hotel{
				margin: 0 auto;
			}
			#hotelData{
				margin: 0 auto;
			}
			.myBtn{
				width: 100px;/*a width value of 100px*/
				padding: 10px;
				background-color: #ecf2f4;
				margin-top: 15px;
			}
			.myCaption{
				font-size: 21px;
				font-weight: bold;
				padding-top: 30px;
				padding-bottom: 10px;
			}
			th{
				background-color: #a8a8a8;
			}
			th,td{
				padding: 10px;
				font-size: 20px;
			}
			/*nth-child() pseudo-class must be applied to shade even table rows (see “Design Resources”)*/
			 table tr:nth-child(even){
		        background-color: #e0e0e0;
		    }
		    #leftAlign{
		    	text-align: left;
		    }
		</style>
		<script>
			function loadJSONDoc(url) {

				var xmlhttp;
				var txt, x, xx, i;
				if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
					xmlhttp = new XMLHttpRequest();
				} else { // code for IE6, IE5
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}

				xmlhttp.open("GET", url, true);
				xmlhttp.send();
				xmlhttp.onreadystatechange = function() {
					if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						txt = "<table border='1'><caption class='myCaption'>MotoGP Racing：Top 10 Rider Statistics</caption ><tr><th>Rank</th><th>Rider Name</th><th>Total Starts</th><th>Total Wins</th><th>Total Losses</th><th>Win Percentage</th></tr>";
						x = JSON.parse(xmlhttp.responseText);  ;
						xx = x.riderStats;
						console.log(xx);
						for(i = 0; i < xx.length; i++) {
							
							try {
								
								txt = txt + "<td>" + xx[i].rank + "</td>";
							} catch(er) {
								txt = txt + "<td> </td>";
							}							
							try {
								txt = txt + "<td id='leftAlign'><a href='#' target='_blank'>" + xx[i].name + "</a></td>";
							} catch(er) {
								txt = txt + "<td> </td>";
							}
							try {
								txt = txt + "<td>" + xx[i].starts + "</td>";
							} catch(er) {
								txt = txt + "<td> </td>";
							}
							try {
								txt = txt + "<td>" + xx[i].wins + "</td>";
							} catch(er) {
								txt = txt + "<td> </td>";
							}
							try {
								txt = txt + "<td>" + (parseInt(xx[i].starts)-parseInt(xx[i].wins)) + "</td>";
							} catch(er) {
								txt = txt + "<td> </td>";
							}
							try {
								let s = ((parseFloat(xx[i].wins)/parseFloat(xx[i].starts))*100).toFixed(2);
								if(s < 30){
									txt = txt + "<td style='background:#ff9999'>" + s + "%</td>";
								}else if(s < 50){
									txt = txt + "<td  style='background:#ffdb99'>" + s + "%</td>";
								}else{
									txt = txt + "<td  style='background:#99cc99'>" + s + "%</td>";
								}
								
							} catch(er) {
								txt = txt + "<td> </td>";
							}
							
							txt = txt + "</tr>";
							
							
						}
						txt = txt + "</table><h3 style='margin-top:10px'>The raw data used for caculating these results has been obtained from <a href=\"#\" target='_blank'>Wikipedia</a></h3>";
						document.getElementById('hotelData').innerHTML = txt;
					}

				}
			}

		</script>

	</head>

	<body>
	<div class="app">
		<div id="hotel">
			<h2 style="margin-top: 10px;">Task4:AJAX&JSON</h2>
			<button class="myBtn" onclick="loadJSONDoc('A5_TASK3.json')">Start</button>		
		</div>
		<div id="hotelData">
			
		</div>
	
	</div>
	</body>

</html>

汤永红
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
通过jquery的ajax请求本地的json文件方法
10-18
今天小编就为大家分享一篇通过jquery的ajax请求本地的json文件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
C#，AJAX读写JSON
03-26
在`success`回调函数中，我们可以访问到返回的JSON数据，并进行处理，如遍历数组并更新页面内容。 如果你不使用jQuery，可以使用原生的fetch API实现相同的功能： ```javascript fetch('/api/users') .then...
AJAX请求JSON文件
qq_38482933的博客
08-01 396
AJAX 可用来与 JSON文件进行交互式通信。 按钮btn添加点击事件 JavaScript 调用的服务器页面是名为 “DOM4.json” 的JSON 文件。 页面代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
AJAX访问JSON数据
weixin_30291791的博客
07-29 82
闲话：突然发现已有半年没有写博了，一是毕业设计，二是找工作，可最重要的是没激情。实习的时候只想着完成任务，下班就想着何时能跑路，回到家了只想着跟同学闲扯玩游戏，周末几乎是没的清闲在家的，要么同学朋友弟弟过来玩，要么就跟着同学出去玩，也不知道玩的什么，只知道很累，只有一种感觉，在家要比工作累的多的多！现在公司定了，住处也妥了，网也OK了，一切都比较满意。虽然一个人住，没人说说话聊聊天，难免...
Ajax读取本地json文件，就是这么简单
最新发布
m0_61369360的博客
03-27 636
Python崛起并且风靡，因为优点多、应用领域广、被大牛们认可。学习 Python 门槛很低，但它的晋级路线很多，通过它你能进入机器学习、数据挖掘、大数据，CS等更加高级的领域。Python可以做网络应用，可以做科学计算，数据分析，可以做网络爬虫，可以做机器学习、自然语言处理、可以写游戏、可以做桌面应用…Python可以做的很多，你需要学好基础，再选择明确的方向。这里给大家分享一份全套的 Python 学习资料，给那些想学习 Python 的小伙伴们一点帮助！
AJAX读取Json文件
qq_43628835的博客
11-21 698
Ajax是对接后端的工具，向服务器发送请求并且接收响应。 使用ajax读取文件需要以下基础的几步： 1.获取需要添加事件的节点（或者叫元素），给予onclik或者其他事件。 2.创建一个XMLHttpRequest对象。 3.调用所创建对象的open方法，选定open方法的method和url。 4.调用对象的send方法。 5.为对象添加onreadystatechange响应函数。 6.判断相...
Ajax_json.rar_JSON_ajax_ajax+json
09-20
处理JSON数据时，JavaScript的`JSON.parse()`方法可以将JSON字符串转换为JavaScript对象，这样就可以直接访问和操作数据。例如，我们可以遍历上述JSON数组，将用户信息显示在网页上。 ```javascript data.forEach...
ajax获取json数据为undefined原因分析
10-18
这个问题通常出现在尝试访问JSON数据的属性时，但数据并没有正确解析或转换为JavaScript对象。以下是对这一问题的深入分析和解决方法。 首先，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它...
Ajax使用JSON数据格式案例
10-25
当请求完成并且状态变为 200 或 304 时，可以访问 `responseText` 属性获取服务器返回的 JSON 字符串。然而，JavaScript 的 `eval()` 函数可以直接将 JSON 字符串解析为 JavaScript 对象，但这种方法存在安全风险，...
jQuery基于ajax操作json数据简单示例
10-20
本篇文章将详细介绍如何使用jQuery的Ajax功能来操作JSON数据，通过实例演示，帮助开发者理解这一过程。 首先，jQuery的Ajax方法允许我们在不刷新整个页面的情况下与服务器进行异步通信。`$.ajax()`是最通用的Ajax...
使用Ajax动态加载JSON文件
11-11
使用Ajax动态加载JSON文件的实例源码
jQuery ajax读取json文件内容
04-18
jQuery ajax读取json文件内容
Ajax(读取JSON基本操作）
时意
09-09 425
上一个文章说了对XML的读取 这次说一下企业开发里最常用的数据交互手段 JOSN 因为XML的格式 和操作和JOSN来对比 还是麻烦了一些 而且JOSN的体积小 传输快 所以JOSN才是最受宠的那一个 JSON只是一种数据格式; 1)JSON 这是一个JS的对象 var obj = {name:'HuiGe',password:'66666'}; //这是一个对象 也可以写...
Ajax读取本地json文件
guoxuying的博客
01-21 5403
Ajax读取本地json文件
ajax接收本地json数据,jQuery ajax读取本地json文件的实例
weixin_32443035的博客
08-05 800
json文件{"first":[{"name":"张三","sex":"男"},{"name":"李四","sex":"男"},{"name":"王武","sex":"男"},{"name":"李梅","sex":"女"}]}js：方法一：$.ajax({url: "ceshi.json",//json文件位置type: "GET",//请求方式为getdataType: "json", //返回...
jQuery ajax读取本地json文件
AinUser的博客
11-29 2664
jQuery ajax读取本地json文件 json文件 { "first":[ {"name":"张三","sex":"男"}, {"name":"李四","sex":"男"}, {"name":"王武","sex":"男"}, {"name":"李梅","sex":"女"} ] }
ajax(读取json数据)
weixin_30856725的博客
07-11 158
ajax知识点： 语法：$.ajax(路由，请求方式，返回的数据类型，数据参数，回调函数) url: "路由", type:"",默认get请求（get或post，二者是有区别） dataType:"",返回数据类型（默认为json数据类型，如果回调函数返回的数据类型不符合，...
Ajax异步请求，获取本地json数据
m0_73341533的博客
03-13 2337
Ajax的核心是XMLHttpRequest对象。2、jQuery的Ajax请求。
驾校学员管理系统开发教程：Servlet+Ajax+JSON
"本文档详细介绍了开发一个驾校学员管理系统的步骤，主要采用了Servlet+Ajax+JSON的前后端分离模式，并基于MySQL数据库进行数据存储。系统包括管理员登录、学员信息管理、数据报表展示以及文件上传等功能。开发过程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汤永红

一分也是爱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值