利用jquery实时刷新博客中的一言组件

缘起

很多人都喜欢调用一言api来给自己的博客添加一个随机的句子。

但是为了不断获取新的句子，似乎只能不断刷新页面，这对于资源是一种极大的浪费，且很不好看。

有没有一种方法可以局部刷新一言而不用重复加载页面呢？

我在网上查了很久，很多人说的云里雾里，非常复杂，关键的是居然没法使用。

终于，我找到了一个大佬写的利用jquery和get()来自动刷新的代码。

出于个人的爱好，我还给一言加入打字机效果。

自动局部刷新

参考： Hyperlink

原创已经不可考据，有很多人抄了这个页面，我只是附了一个我看到的链接而已。

<!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="./jquery-1.11.1.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>

我的用法

<!--打字机效果-一言网一句引入-->
<script src="./assets/js/typed.js"></script>
<span id="hitokoto" style="font-size: 25px; font-family:Microsoft YaHei;"></span>
<script src="./assets/js/hitikoto.js"></script>

<!--END:打字机效果-一言网一句引入-->

//hitikoto.js
function get_Ajax() {
  $.get('https://v1.hitokoto.cn',{},function(respoonse){
    $('#hitokoto').html(respoonse.hitokoto);
  },'JSON');
}
function Ajax_Start(){
  setInterval(get_Ajax,5000);
}
get_Ajax();
Ajax_Start();