一个简单的模拟ajax如何获取json数据的实例

最新推荐文章于 2024-09-20 11:42:37 发布

siyi_blog

最新推荐文章于 2024-09-20 11:42:37 发布

阅读量1.9w

点赞数 10

本文链接：https://blog.csdn.net/siyi_blog/article/details/81115433

版权

自己写了一个模拟数据文件queryList.json，表单中的内容都是数据循环出来的，在本实验中需要引入jquery文件，下面简单展示如何用jq的ajax获取json数据。

先看效果图：

queryList.json

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

json数据展示截图：

testjson.html

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

好了，一个简单的ajax调取数据就完成了。