通过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.注意事项
该实例中仅仅有index.html文件，goods.json文件，和一张图片，其中ajax中的url指定json文件的路径（不能写错）。
4.效果如下
网友评论