借鉴！！模拟ajax获取数据并渲染页面

最新推荐文章于 2024-12-23 23:40:43 发布

转载最新推荐文章于 2024-12-23 23:40:43 发布 · 841 阅读

文章标签：

#ajax #获取接口数据拼接 #ajax获取数据 #后台接口数据

本文详细介绍如何使用Ajax从goods.json文件中获取商品数据，并将其动态渲染到HTML页面上，展示了具体的代码实现过程及效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过ajax请求数据后，进行页面渲染。

文件介绍

1.goods.json，用于模拟后台接口数据

{
	"cursor": 0,
	"size": 40,
	"page": 0,
	"result": [{
			"price": "1000",
			"name": "小米手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "2000",
			"name": "华为手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "3000",
			"name": "锤子手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "4000",
			"name": "一加手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "5000",
			"name": "魅族手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "6000",
			"name": "小米手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "7000",
			"name": "华为手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "8000",
			"name": "锤子手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "9899",
			"name": "一加手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "10099",
			"name": "魅族手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "20000",
			"name": "小米手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "30000",
			"name": "华为手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "40000",
			"name": "锤子手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "50899",
			"name": "一加手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "60099",
			"name": "魅族手机",
			"imgUrl": "img/1.png"
		}
	],
	"hasnext": 100
}

2.html，用于显示页面内容。

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<title>ajax请求数据并渲染到页面</title>
		<style type="text/css">
			#test{
				width: 100%;
				padding: 10px;
				height: 1000px;
				border: 1px solid gainsboro;
				border-radius: 8px;
			}
			.inner {
				display: inline-block;
				padding: 20px;
				border: 1px solid gainsboro;
				text-align: center;
				margin-left: 20px;
				margin-bottom: 20px;
				border-radius: 8px;
			}
			.inner:hover{
				border: 1px solid deeppink;
			}
			.inner:hover h3{
				color: deeppink;
			}
			.inner img {
				width: 200px;
				height: 200px;
				font-size: 0;
			}
			
			h3,
			span {
				font-size: 20px;
			}
		</style>
	</head>
 
	<body>
		<div id="test">
			<!--假数据-->
			<!--<div class="inner">
				<img src="img/1.png"/>
				<h3>名称：小米手机</h3>
				<span>价格：1000</span>
			</div>-->
		</div>
	</body>
 
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
		$.ajax({
			type: "GET",
			url: "goods.json",
			dataType: "json",
			success: function(res) {
				console.log(res);
				console.log(typeof(res));
				var data = res.result;
				console.log(data);
				var str = '';
				// 注意：输出的i与obj分别为下标与单个的对象
				$.each(data, function(i, obj) {
					// console.log(i);
					// console.log(obj);
					str += '<div class="inner">';
					str += '<img src="' + obj.imgUrl + '"/>';
					str += '<h3>' + '名称：' + obj.name + '</h3>';
					str += '<span>' + '价格：￥' + obj.price + '</span>';
					str += '</div>';
				});
				$("#test").append(str);
			}
		});
	});
</script>

3.注意事项
这里有html文件和goods.json文件两个，goods.json可单独放到文件内，然后在html中引用，注意，路径不能引入错误，其中还用到jquery，自行引入；

4.效果图如下：
在这里插入图片描述