怎么把获取到的json数据渲染到页面怎么实现获取一次就不在获取了
来源：3-5 自由编程
慕仰8079247
2022-01-23 19:51:21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: "iconfont";
src: url('test/font/iconfont.eot?t=1477124206');
/* IE9*/
src: url('test/font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('test/font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */
url('test/font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('test/font/iconfont.svg?t=1477124206#iconfont') format('svg');
/* iOS 4.1- */
}
.icon {
font-family: "iconfont" !important;
font-size: 14px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
a{
text-decoration: none;
}
i{
font-style: normal;
}
.cart{
background: red;
width:200px;
height:70px;
color:#fff;
line-height: 70px;
text-align: center;
font-size: 14px;
margin: 0 auto;
}
.iconfont-cart{
font-size: 20px;
}
i{
color:#fff;
display: inline-block;
}
.menu-active .iconfont-arrow{
transform: rotate(180deg);
}
.transition{
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.menu-active {
margin: 0 auto;
background: #fff;
position: relative;
border:1px solid #cdd0d4;
border-bottom: none; border:1px solid #cdd0d4;
border-bottom: 1px solid #fff;
z-index: 3;
text-align: center;
}
.menu-active i{
color:red;
}
.menu-active .cart-layer{
width:400px;
height:150px;
border:1px solid #cdd0d4;
position: absolute;
top:70px;
left:-200px;
z-index: 0;
}
.pigcart,.text{
display:none;
}
.menu-active .cart-layer .pigcart{
float:left;
display:block;
color: #cdd0d4;
font-size: 40px;
width:30px;
text-indent: 105px;
line-height: 150px;
}
.menu-active .cart-layer .text {
float: right;
font-size: 17px;
display:block;
color: #cdd0d4;
line-height: 150px;
height:30px;
width:180px;
margin-left:35px;
}
</style>
</head>
<body>
<div class="cart" data-active="menu">
<a href="javascript">
<i class="iconfont-cart icon"></i>
<i> 购物车</i>
<i>| 0</i>
<i class="iconfont-arrow icon"></i>
</a>
<div class="cart-layer" >
<div class="cart-empty">
<i class="icon pigcart"></i>
<span class="text">购物车里面还没有商品赶紧去选购!</span>
</div>
</div>
</div>
<script src="js/jquery-1.7.1.js"></script>
<script src="js/transition.js"></script>
<script src="js/showhide.js"></script>
<script src="js/dropdown.js"></script>
<script>
$('.cart').dropdown({
css3:true,
js:true,
animation:'fade'
});
$('.cart').on('mouseenter',function(){
$.ajax({
url:"js/cart.json",
method:"post",
dataType:'',
success:function(data){
for(var i in data){
console.log(data[i].url)
var html=[];
// html.push('<img class="img" src="data[i].url">');
html.push('<span class="span">data[i].name</span>');
html.push('<span class="divide">x</span>')
html.push('<p class="price">data[i].price</p>');
$('.cart-layer').append(html.join(''))
}
},
error:function(data){
console.log(data)
}
})
})
</script>
</body>
</html>
1回答
-
好帮手慕然然
2022-01-24
同学你好，实现过程如下：
首先，创建一个json文件，同学没有粘贴json文件代码，老师这里是自己定义的，如下
然后，通过ajax请求该json数据，注意这里使用get请求，如下
最后，遍历请求到的数据，动态生成html结构，将其挂载到页面，如下
最终显示效果如下：不过样式不太美观，建议同学先把样式处理好，再加载动态数据。通常的做法是先把html结构写好，样式调整好，最后再把静态的html结构换成动态的，而不是一开始就做动态的效果。
祝学习愉快！
0
相似问题