Ajax之调用一言网站API接口

朱建伟 2019-12-15

Ajax的作用,主要是实现局部刷新。

通过老大哥告知,Ajax接口可以使用一言网站的,所以自己就练了一下子。

本文所有用到的接口都来自一言网站:https://hitokoto.cn/api

通过网站公告可知,一言网站的JSON数据格式如下:

id本条一言的id。
可以链接到https://hitokoto.cn?id=[id]查看这个一言的完整信息。
hitokoto一言正文。编码方式unicode。使用utf-8。
type类型。请参考第三节参数的表格。
from一言的出处。
creator添加者。
created_at添加时间。
注意:如果encode参数为text,那么输出的只有一言正文。

接口类型如下:

https://v1.hitokoto.cn/(从7种分类中随机抽取)

https://v1.hitokoto.cn/?c=b (请求获得一个分类是漫画的句子)

https://v1.hitokoto.cn/?c=f&encode=text (请求获得一个来自网络的句子,并以纯文本格式输出)

既然我们知道了接口,那么就让我们来分析一下如何利用Ajax使用这个接口。

首先先要确定html页面需要如何显示数据,使用列表、表格、还是lable标签呢?

这里我们采用了简单的table(表格)标签,注意,在使用表格的时候tr表示表格中的行,td表示表格中的单元格,tr需要和td嵌套使用即:<tr><td></td></tr>

既然我们确定了HTML页面使用表格标签来显示数据,那么接下来我们编写JS代码。

编写JS代码,需要创建一个入口,然后在入口中编写Ajax的请求函数,

最后,通过获取标签元素来给HTML页面进行传值。

代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax使用一言接口</title>
    <script src="../JS/jquery-1.12.4.min.js"></script>
    <script>
        function get_Ajax(){
            $.get(‘https://v1.hitokoto.cn/‘,{},function(response){
                $(‘#td1‘).html(response.id);
                $(‘#td2‘).html(response.hitokoto);
                $(‘#td3‘).html(response.type);
                $(‘#td4‘).html(response.from);
                $(‘#td5‘).html(response.creator);
                $(‘#td6‘).html(response.created_at);
            },‘JSON‘);
        }
        function Ajax_start(){
            setInterval(get_Ajax,5000);   
        }

    </script>
    <style>
    table,tr,td{
        border: 4px solid yellowgreen;
        border-collapse: collapse;
    }

    </style>
</head>
<body>
    <table>
        <tr><td>ID:</td><td id="td1">无</td></tr>
        <tr><td>正文:</td><td id="td2">无</td></tr>
        <tr><td>类型:</td><td id="td3">无</td></tr>
        <tr><td>出处:</td><td id="td4">无</td></tr>
        <tr><td>添加者:</td><td id="td5">无</td></tr>
        <tr><td>添加时间:</td><td id="td6">无</td></tr>
    </table>
    <input type="button" value="开始Ajax请求" onclick="Ajax_start()">
</body>
</html>

相关推荐

末点 / 0评论 2020-06-27