【学习笔记】-结合JQuery和Ajax实现局部数据刷新

最新推荐文章于 2022-03-21 11:10:01 发布

KVN_G

最新推荐文章于 2022-03-21 11:10:01 发布

阅读量161

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/qq_44940503/article/details/111297123

版权

学习笔记专栏收录该内容

49 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<style>

			#title{
				text-align: center;
				/* 字体加粗 */
				font-weight: bolder;
				font-size: large;
			}
			table,
			table tr th,
			table tr td{
				/* 表格表框 */
				border: 1px solid;
				width: 300px;
				/* 合并边框,collapse,边框间距 */
				border-collapse: collapse;
				/*auto代表表格左右居中 */
				margin:auto;
			}
		</style>
	</head>
	<body>
		<input type="button" name="" id="btn" value="点我呀" />
		<hr>
		<div id="title">

		</div>
		<div id="ajaxtext">
			<table class="aja">

			</table>
		</div>
		<script type="text/javascript">
			$(function() {
				$("#btn").click(function() {
					$.get("http://rap2api.taobao.org/app/mock/238982/api/students", function(result) {
						//清空table原有节点
						$(".aja").empty();
						//清空id=title的div节点
						$("#title").empty();
						
						$("#title").append("AJAX获取数据信息列表");
						$(".aja").append(
							`<tr>
								<th>id</th>
								<th>name</th>
								<th>age</th>
								<th>email</th>
							</tr>`
						);
						$.each(result.students, function(index, obj) {
							$(".aja").append(
								`<tr align="center">
								<td >${obj.id}</td>
								<td >${obj.name}</td>
								<td >${obj.age}</td>
								<td >${obj.email}</td>
								</tr>`
							);
						});
					})
				});
			});
		</script>
	</body>
</html>