使用的api接口网站：https://www.tianapi.com/
免费版一天100次，个人够用。
使用软件：VScode，谷歌浏览器。
这里以微博热搜榜作为第一次练习使用：https://www.tianapi.com/apiview/100
注册申请接口
打开vscode创建一个练习.html文件
添加内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
参考官方说明开始写内容
先写body内容
<body>
<div style="overflow: hidden">
<input type="button" id="button" value="查看" />
</div>
<ul>
</ul>
</body>创建一个点击事件
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>引入jQuery
这里的调用函数用的官方jQuery改的
//页面需引入jquery库 https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
$(document).ready(function(){
$('#button').click(function(){ //点击页面上id为button的按钮发送请求
$.post('http://api.tianapi.com/weibohot/index',
{
key:'你的APIKEY'
},
function(data,status){
console.log(data);
$('#result').append(JSON.stringify(data)); //返回内容绑定到id为result的标签
alert('状态码：' + data.code + '\n消息：' + data.msg);
});
});
});
$(document).ready(function () {
let oUL = document.querySelector("ul");//获取到ul
$("#button").click(function () {//点击页面上id为button的按钮发送请求
$.post(
"http://api.tianapi.com/weibohot/index",
{
key: "eb59864e6e6e0c08d7ac6dab6dfa9b5e",
},
function (data, status) {
let dataa = data.newslist;
let str = "";
if (dataa) {
dataa.forEach((item) => {//通过遍历用字符串拼接给拼接起来
str += `
<li id='ll'>
<p href="">${item.hotword}</p>
<p id='z12'>热度${item.hotwordnum}</p>
</li>
`;
});
}
oUL.innerHTML = str; //将拼接的字符串添加到oUL内
}
);
});
});这里key就不改了，大家想用的可以试试，反正免费的，调用次数也就100。
点击查看会出现左边的效果，右边是调用成功的返回值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#button {
width: 50px;
height: 50px;
}
#text {
height: 50px;
border: 1px solid #000;
background-color: aliceblue;
}
input {
float: left;
}
#text:active {
content: "";
height: 1px;
}
ul {
width: 900px;
margin: 0 auto;
}
li {
width: 300px;
/* height: 200px; */
list-style: none;
/* border: 0px solid #000; */
/* float: left; */
/* background-color: antiquewhite; */
}
#ll {
position: relative;
}
#ll img {
position: absolute;
bottom: 16px;
}
#z12 {
position: absolute;
font-size: 12px;
bottom: 0px;
right: -80px;
color: red;
}
</style>
</head>
<body>
<div style="overflow: hidden">
<input type="button" id="button" value="查看" />
</div>
<ul>
<!-- 一级导航 -->
</ul>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
//eb59864e6e6e0c08d7ac6dab6dfa9b5e
//页面需引入jquery库 https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
$(document).ready(function () {
let oInput = document.getElementById("text");
let oUL = document.querySelector("ul");
let oDiv = document.getElementById("pot");
$("#button").click(function () {
//点击页面上id为button的按钮发送请求
$.post(
"http://api.tianapi.com/weibohot/index",
{
key: "eb59864e6e6e0c08d7ac6dab6dfa9b5e",
},
function (data, status) {
console.log(data);
// console.log(data.newslist);
// console.log(data.newslist[0]);
// console.log(data.newslist[0].hotword);
// console.log(data.newslist.length);
let dataa = data.newslist;
let str = "";
if (dataa) {
dataa.forEach((item) => {
str += `
<li id='ll'>
<p href="">${item.hotword}</p>
<p id='z12'>热度${item.hotwordnum}</p>
</li>
`;
// console.log(item.picUrl);
});
}
oUL.innerHTML = str;
// console.log(str);
}
);
});
});
</script>
</html>
这里就把本次代码贴过来了，大家可以参考，api接口的调用难点无非是跨域处理级数据处理。
当然本次就一点点数据处理操作。
-> 加入科技玩家交流群组：点击加入 注意:
1.文中二维码和链接可能带有邀请性质，请各位玩家自行抉择。
2.请勿通过链接填写qq号与密码、银行卡号与密码等个人隐私信息。
3.禁止纯拉人头，拉app注册等信息，发现必小黑屋。
4.同一种信息仅发一次，多发会被删除。
5.文章中源码或APP等，无法保证其绝对安全，需自行辨别。
6.文章关联方不想展示也可以微信站长“socutesheep”删除。
1.文中二维码和链接可能带有邀请性质，请各位玩家自行抉择。
2.请勿通过链接填写qq号与密码、银行卡号与密码等个人隐私信息。
3.禁止纯拉人头，拉app注册等信息，发现必小黑屋。
4.同一种信息仅发一次，多发会被删除。
5.文章中源码或APP等，无法保证其绝对安全，需自行辨别。
6.文章关联方不想展示也可以微信站长“socutesheep”删除。
本文由 @真 发布。如若转载，请注明出处： 科技玩家 » js脚本编写教程，第一弹，jQuery调用api接口
真棒，感谢分享！