avatar

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

缘起

很多人都喜欢调用一言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>

<!--END:打字机效果-一言网一句引入-->
1
2
3
4
5
6
7
8
9
10
11
//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();
1
2
//typed.js
//Download it from https://github.com/mattboldt/typed.js

暂时还搞不懂怎么添加打字机效果,等以后有空了再摸索一下。

Author: Jie
Link: https://blog.jiehua1995.xyz/post/Refresh_Yiyan_by_jquery_without_reloading_page/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
Donate
  • Wechat Pay
    Wechat Pay
  • Ali Pay
    Ali Pay

Comment