缘起
很多人都喜欢调用一言api来给自己的博客添加一个随机的句子。
但是为了不断获取新的句子,似乎只能不断刷新页面,这对于资源是一种极大的浪费,且很不好看。
有没有一种方法可以局部刷新一言而不用重复加载页面呢?
我在网上查了很久,很多人说的云里雾里,非常复杂,关键的是居然没法使用。
终于,我找到了一个大佬写的利用jquery和get()来自动刷新的代码。
出于个人的爱好,我还给一言加入打字机效果。
自动局部刷新
参考: Hyperlink
原创已经不可考据,有很多人抄了这个页面,我只是附了一个我看到的链接而已。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
| <!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>
|
我的用法
1 2 3 4 5 6
| <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>
|
1 2 3 4 5 6 7 8 9 10 11
| 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();
|
暂时还搞不懂怎么添加打字机效果,等以后有空了再摸索一下。