使用jquery的ajax请求

前端交互仔

于 2020-11-12 10:56:46 发布

阅读量137

点赞数

分类专栏： json

原文链接：https://blog.csdn.net/siyi_blog/article/details/81115433?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.edu_weight&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.edu_weight

版权

json 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.container {
				width: 800px;
				margin: 0 auto;
				margin-top: 100px;
				padding: 30px 0;
				border: 1px dashed #272627;
			}
			
			.test {
				width: 100%;
				padding: 10px 0;
				margin: 20px 0;
				color: #4bade8;
				font-size: 18px;
				text-align: center;
			}
			
			#jsonTable {
				width: 500px;
				margin: 0 auto;
			}
			
			#jsonTable th,
			td {
				padding: 6px 0;
				line-height: 30px;
				text-align: center;
			}
		</style>
	</head>
 
	<body>
		<div class="container">
			<div class="test">获取模拟json数据</div>
			<table border="1" cellspacing="0" bordercolor="#4bade8" cellpadding="0" id="jsonTable">
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</table>
		</div>
 
		<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				getDate();
 
				function getDate() {
					var temp = '';
					$.ajax({
						type: "get",
						url: "queryList.json",
						dataType: "json",
						success: function(res) {
							var list = res.animals
							console.log(list)
							for(var $i = 0; $i < list.length; $i++) {
								temp +=
									'<tr>' +
									'<td>' + list[$i].id + '</td>' +
									'<td>' + list[$i].name + '</td>' +
									'<td>' + list[$i].age + '</td>' +
									'</tr>';
							}
							$("#jsonTable tr:not(:first)").html(""); /*  除了第一行tr的内容，其余内容清空，防止获取重复的数据  */
							$("#jsonTable").append(temp);
						}
					});
				}
			});
		</script>
	</body>
</html>

{
			"animals":[
		{
			"id":1,
			"name":"dog",
			"age":3
		},
		{
			"id":2,
			"name":"kitty",
			"age":2
		},
		{
			"id":3,
			"name":"cat",
			"age":4
		}
		]
}

参考文章:
https://blog.csdn.net/siyi_blog/article/details/81115433?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.edu_weight&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.edu_weight