js 数组渲染到html页面

最新推荐文章于 2023-11-30 15:30:29 发布

原创最新推荐文章于 2023-11-30 15:30:29 发布 · 4.5k 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

笔记专栏收录该内容

24 篇文章

订阅专栏

该博客内容涉及一个HTML页面结构，包括玩家伙伴、车圈厂牌和跨界厂牌三个部分。车圈厂牌和跨界厂牌的数据通过AJAX从指定接口获取，并使用JSON格式进行数据交换。在成功获取数据后，利用JavaScript遍历并动态生成item元素，将图片链接插入到对应的item-box内，实现了页面内容的动态加载。

html页面

<div class="friends">
        <div class="index-title">
            玩家伙伴
        </div>
        <div class="top">
            <div class="title">
                车圈厂牌
            </div>
            <div class="item-box f1">
                
            </div>
        </div>
        <div class="bottom">
            <div class="title">
                跨界厂牌
            </div>
            <div class="item-box f2">
                
            </div>
        </div>
    </div>

// 车圈厂牌
    $.ajax({
        url: "https://car-player.cloud-top.com.cn/index.php?d=gw&c=partner&m=get_list&type=1",
        type: "GET",
        dataType: "json",
        success: function(data) {
            var data = data.data.list;
            var listHtml='';
            for(let i = 0; i < data.length; i++){
                listHtml += '<div class="item"><img src="'+data[i].cover_url+'"></div>'
            }
            $(".friends .item-box.f1").html(listHtml); 
        }
    })


    // 跨界厂牌
    $.ajax({
        url: "https://car-player.cloud-top.com.cn/index.php?d=gw&c=partner&m=get_list&type=2",
        type: "GET",
        dataType: "json",
        success: function(data) {
            var data = data.data.list;
            var listHtml='';
            for(let i = 0; i < data.length; i++){
                listHtml += '<div class="item"><img src="'+data[i].cover_url+'"></div>'
            }
            $(".friends .item-box.f2").html(listHtml); 
        }
    })

获取接口中的数组data后，for循环，把item 中要遍历的内容用data[i].xxxx来替换，然后把item放回item.box里即可