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

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

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

电脑桌面 RocketDock教程

2022-3-15 9:49:43

教程玩家投稿

sillyGirl 无法连接 Telegram BOT 教程

2022-3-16 0:05:06

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

    感谢大佬

  2. saber010

    希望继续更新下去

    • 真

      两小时发了一个,传参的,还在审核,可能小姐姐不在吧

  3. ‭22636

    学习一下

  4. 胖虎菌

    收藏支持一波

  5. Miniya

    前排支持

  6. cctomz

    学习了解👍

  7. Carol

    不明觉厉,支持一下👍🏻👍🏻👍🏻

  8. Carol

    mark一手!不错!

  9. Carol

    本中级玩家前来顶帖😬

  10. ◇尘埃灬

    各个代码作用都不懂咋弄,基本的还没明白呢

    • 真

      不是专业的话,会用就行,懂没必要

  11. Bo0m

    学习一下

  12. wonder

    感谢大佬

  13. 这把看我表演

    谢谢分享,学习了

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