js脚本编写教程,第二弹,jQuery调用api接口

回顾第一弹

js脚本编写教程,第一弹,jQuery调用api接口

前叙

js脚本编写教程,第一弹,jQuery调用api接口
使用的api接口网站:https://www.tianapi.com/
免费版一天100次,个人够用。

实操

第一个练习接口:http://api.tianapi.com/dyvideohot/index

套用上次模板就可以返回数据:

![6991a55e33d6670c229cdded1d05d48f.png](:/4435f3a9d0fc48b0ad04bb472c0d0b1e)

取到数据就可以出来,将其在页面显示。

第二个练习接口: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”删除。
本文由 @真 发布。如若转载,请注明出处: 科技玩家 » js脚本编写教程,第二弹,jQuery调用api接口

给TA买糖
共{{data.count}}人
人已买糖
教程玩家投稿

利用 HTTP Catcher | 调试工具 |将一个英文代码 | 解决永久VIP | 去广告 | 教程

2022-3-17 23:11:41

教程

PagerMaid-Modify人形自走bot 二次尝试搭建—错误解决——3.18更新安装Cl**h出现问题

2022-3-18 22:59:06

26 条回复 A文章作者 M管理员
贴心提醒
请认真对待作者付出,勿发表无意义言论,触发过滤规则的评论将无法提交,包含敏感词的评论会自动变成待审核状态哦。
  1. clx19870403

    谢谢分享,学习了

  2. xujuly2009

    打卡升级

  3. jack001

    打卡升级

  4. jerryc

    感谢分享,插眼学习

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索