用ajax获取接口数据并展示到html

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

怎么把接口里的数据用ajax提取并展示到网页上啊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this is a test</title>
</head>
<body>
<div id="title"></div>
<div id="name"></div>
<div id="story"></div>
<div id="ability"></div>
</body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script>
    $.ajax({
        url:"https://autumnfish.cn/api/hero/detail?name=提莫",
        type:"get",
        dataType: "json",
        contentType : 'x-www-form-urlencoded',
        success:function(result){
            console.log(result);
            document.getElementById("title").innerText=result.title;
            document.getElementById("name").innerText=result.name;
            document.getElementById("story").innerText=result.story;
            for(var key in result.ability){
                document.getElementById("ability").innerText += (key + ":" + result.ability[key] + "\n");
            }
        }
    })

</script>
</html>

接口允许跨域访问，导入jquery框架直接请求接口获取数据即可，示例如下

删

参考一下：https://blog.csdn.net/weixin_44153063/article/details/103254548

如果对你有帮助，可以点击我这个回答右上方的【采纳】按钮，给我个采纳吗，谢谢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this is a test</title>
</head>
<body>
<input id="button" onclick="timo()" type="button" value="提取提莫信息"/>
<div id="title"></div>
<div id="name"></div>
<div id="story"></div>
<div id="ability"></div>
<img id="img">
</body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script>
    function timo(){
        $.ajax({
            url:"https://autumnfish.cn/api/hero/detail?name=提莫",
            type:"get",
            dataType: "json",
            contentType : 'x-www-form-urlencoded',
            success:function(result){
                console.log(result);
                document.getElementById("title").innerText=result.title;
                document.getElementById("name").innerText=result.name;
                document.getElementById("story").innerText=result.story;
                for(var key in result.ability){
                    document.getElementById("ability").innerText += (key + ":" + result.ability[key] + "\n");
                }
                document.getElementById("img").src=result.icons[0];
            }
        })
    }

</script>
</html>

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

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

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

http://localhost:8086/springmvc_ssm_191_war_exploded/common_problem/getAllCommon_problem 这个接口要怎么显示啊大佬@大太子二太子