json如何把数据接入html之菜鸟版

举一个栗子：

<ul class="slide">
<li><a href="www.baidu.com"><img src="images/slide01.png" alt="幻灯片01" ></a></li>
<li><a href="#"><img src="images/slide02.jpg" alt="幻灯片02" ></a></li>
<li><a href="#"><img src="images/slide03.jpg" alt="幻灯片03" ></a></li>
<li><a href="#"><img src="images/slide04.jpg" alt="幻灯片04" ></a></li>
</ul>

这是一个轮转图，图片已经安插好了，如果要把图片用json中的url链接更换，我们可以这样做：

<ul class="slide">
<li><a href="www.baidu.com"><img src="images/slide01.png" alt="幻灯片01" class="img1"></a></li>
<li><a href="#"><img src="images/slide02.jpg" alt="幻灯片02" class="img2"></a></li>  // 创建一个class（在css中没有的） //
<li><a href="#"><img src="images/slide03.jpg" alt="幻灯片03" class="img3"></a></li>
<li><a href="#"><img src="images/slide04.jpg" alt="幻灯片04" class="img4"></a></li>
</ul>

//接着加一个jQuery//

<script>
let adlist = {
"adlist": [
{
"index":"1",
"name":"创意广告5555",
"img":"http://47.105.60.171/course/img/ad1.jpg",
"url":"http://47.105.60.171/course/ad.html"
},
{
"index":"2",
"name":"创意广告999",
"img":"http://47.105.60.171/course/img/ad2.jpg",
"url":"http://47.105.60.171/course/ad.html"
},
{
"index":"3",
"name":"创意广告3",
"img":"http://47.105.60.171/course/img/ad3.jpg",
"url":"http://47.105.60.171/course/ad.html"
},
{
"index":"4",
"name":"创意广告4",
"img":"http://47.105.60.171/course/img/ad4.jpg",
"url":"http://47.105.60.171/course/ad.html"
}
]
}

$(".box h4 span").text(adlist.adlist[0].name);
$(".slide .img1").attr("src",adlist.adlist[0].img);  //前面是一个class 后面也是,一定要有两个class才能成哦！// 
$(".slide .img2").attr("src",adlist.adlist[1].img);
$(".slide .img3").attr("src",adlist.adlist[2].img);
$(".slide .img4").attr("src",adlist.adlist[3].img);

</script>

如果要替换文字，价格之类的也同理：

原文：

<ul class="goods_list fl">
<li>
<a href="#" class="goods_pic"><img src="images/goods/goods003.jpg" class="img5"></a>
<h4 class="w1"><a href="#" title="360手机 N6 Pro 全网通 6GB+128GB 极夜黑">潮人必备</a></h4>
<div class="prize i5">￥ 299.00</div>
</li>

</ul>

替换（在后面加）：

<script type="text/javascript">
let discount = {

"discount": [
{
"goods":"罗技（Logitech）G502 炫光自适应游戏鼠标",
"descr":"罗技（Logitech）G502 炫光自适应游戏鼠标 RGB鼠标 FPS鼠标 吃鸡鼠标",
"img":"http://47.105.60.171/course/img/1.jpg",
"url":"http://47.105.60.171/course/ad.html",
"price":"379.00",
"dprice":"379.00"
},
{
"goods":"Apple 妙控鼠标2/无线鼠标2代 - 银色",
"descr":"新年添心意，便捷新生活Apple产品的配件",
"img":"http://47.105.60.171/course/img/2.jpg",
"url":"http://47.105.60.171/course/ad.html",
"price":"522.00",
"dprice":"499.00"
}
]

}

$(".goods_pic .img5").attr("src",discount.discount[0].img);
$(".goods_pic .img6").attr("src",discount.discount[1].img);
$(".goods_list .w1").text(discount.discount[0].goods);
$(".goods_list .w2").text(discount.discount[1].goods);
$(".goods_list .i5").text(discount.discount[0].price);
$(".goods_list .i6").text(discount.discount[1].price);

</script>

json如何把数据接入html之菜鸟版

原文：https://www.cnblogs.com/temaka/p/14842217.html