模拟ajax请求数据并进行页面渲染

分手后的思念是犯贱 2021-09-15 09:54 581阅读 0赞

通过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>
    	</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.注意事项

该实例中仅仅有index.html文件，goods.json文件，和一张图片，其中ajax中的url指定json文件的路径（不能写错）。

4.效果如下

![20180509172515907][]

温馨提示

更多前端博客，请关注公众号：**xssy5431**

**扫码如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70][]

[20180509172515907]: /images/20210802/dbea9ff442354982b0f0424ae4491665.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70]: /images/20210802/b25b24901ba94984a72042b411051cbc.png