回顾第一弹
前叙
js脚本编写教程，第一弹，jQuery调用api接口
使用的api接口网站：https://www.tianapi.com/
免费版一天100次，个人够用。
实操
第一个练习接口：http://api.tianapi.com/dyvideohot/index
套用上次模板就可以返回数据：
取到数据就可以出来，将其在页面显示。
第二个练习接口：http://api.tianapi.com/douyinhot/index
代码页：
再来一个带参数的接口：http://api.tianapi.com/sicprobe/index
附代码
<!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: 200px;
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;
}
</style>
</head>
<body>
<div style="overflow: hidden">
<input type="text" id="text" value="" />
<input type="button" id="button" value="搜索" />
</div>
<ul>
<!-- 一级导航 -->
</ul>
<div id="pot">
<!-- 二级导航 -->
<!-- 分块，用ul表示 -->
</div>
</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的按钮发送请求
let value = oInput.value;
console.log(value);
$.post(
"http://api.tianapi.com/sicprobe/index",
{
key: "eb59864e6e6e0c08d7ac6dab6dfa9b5e",
num: "10",
word: value,
},
function (data, status) {
// console.log(data);
// console.log(data.newslist);
// console.log(data.newslist[0]);
// console.log(data.newslist[0].picUrl);
// console.log(data.newslist.length);
let dataa = data.newslist;
let str = "";
if (dataa) {
dataa.forEach((item) => {
str += `
<li id='ll'>
<p href="">${item.title}</p>
<br>
<img src="${item.picUrl}" alt="">
<p id='z12'>${item.ctime}</p>
</li>
`;
// console.log(item.picUrl);
});
}
oUL.innerHTML = str;
// console.log(str);
}
);
});
});
</script>
</html>这个主要是通过获取搜索框内的值，传参来调接口搜索。
-> 加入科技玩家交流群组：点击加入 注意:
1.文中二维码和链接可能带有邀请性质，请各位玩家自行抉择。
2.请勿通过链接填写qq号与密码、银行卡号与密码等个人隐私信息。
3.禁止纯拉人头，拉app注册等信息，发现必小黑屋。
4.同一种信息仅发一次，多发会被删除。
5.文章中源码或APP等，无法保证其绝对安全，需自行辨别。
6.文章关联方不想展示也可以微信站长“socutesheep”删除。
1.文中二维码和链接可能带有邀请性质，请各位玩家自行抉择。
2.请勿通过链接填写qq号与密码、银行卡号与密码等个人隐私信息。
3.禁止纯拉人头，拉app注册等信息，发现必小黑屋。
4.同一种信息仅发一次，多发会被删除。
5.文章中源码或APP等，无法保证其绝对安全，需自行辨别。
6.文章关联方不想展示也可以微信站长“socutesheep”删除。
本文由 @真 发布。如若转载，请注明出处： 科技玩家 » js脚本编写教程，第二弹，jQuery调用api接口
谢谢分享，学习了
打卡升级
打卡升级
感谢分享，插眼学习
辛苦大佬分享了，我先学习一下
厉害，有空学习一下
辛苦了，学习一下
打卡升级