如何用.attr从接口中获取文本数据并渲染到html中

接口为 https://autumnfish.cn/api/hero/detail?name=提莫

你个接口返回的是json格式的数据，用ajax请求把返回的结果处理一下就可以了。

有什么问题可以继续问，帮助到你可以点击采纳支持下，谢谢~

<img data-key="icons" />
<div data-key="name" data-field="名称"></div>
<div data-key="title" data-field="头衔"></div>
<div data-key="tags" data-field="属性"></div>
<div data-key="story" data-field="简介"></div>
<div data-key="ability" data-field="能力"></div>
<img data-key="bgs" />
<br />
<input type="button" onclick="LoadData('提莫')" value="读取“提莫”数据" />　<input type="button" onclick="LoadData('维迦')" value="读取“维迦”数据" />
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
    var kv = { life: '生命值', physical: '物理攻击', magic: '魔法攻击', difficulty: '困难' }
    function LoadData(name) {
        $.ajax({
            url: "https://autumnfish.cn/api/hero/detail?name=" + name,
            dataType: "json",
            success: function (data) {
                $('[data-key]').each(function () {
                    var key = this.dataset.key;
                    this.innerHTML = '<b>'+this.dataset.field + '：</b>';
                    if (key == 'ability') for (var attr in data[key]) this.innerHTML += kv[attr] + '：' + data[key][attr] + '　';
                    else if (key == 'icons' || key == 'bgs') {
                        var index = 0;//读取第几张图片修改这里
                        this.src = data[key][index];
                    }
                    else if (key == 'tags') this.innerHTML += data[key].join('，');
                    else this.innerHTML += data[key]
                });
            },
            error: function () { alert('下载数据出错！') }
        })
    }
</script>

您的问题已经有小伙伴解答了，请点击【采纳】按钮，采纳帮您提供解决思路的答案，给回答的人一些鼓励哦～～

ps:开通问答VIP，享受5次/月 有问必答服务，了解详情↓↓↓

【电脑端】戳>>>  https://vip.csdn.net/askvip?utm_source=1146287632
【APP 】  戳>>>  https://mall.csdn.net/item/52471?utm_source=1146287632