weixin_58402596
2021-05-31 16:55
采纳率: 33.3%
浏览 171

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

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

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

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • 大太子二太子 2021-05-31 17:57
    已采纳
    <!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>
    已采纳该答案
    打赏 评论
  • CSDN专家-showbo 2021-05-31 17:55

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

     

    2 打赏 评论
  • CSDN专家-黄老师 2021-05-31 17:08

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

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

    1 打赏 评论
  • 大太子二太子 2021-06-01 09:01
    <!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>
    打赏 评论
  • 有问必答小助手 2021-06-01 10:15

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

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

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

    打赏 评论

相关推荐 更多相似问题