回顾第一弹

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

真
  • 1
  • 1.2k

前叙

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

附代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. <style>
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. }
  14. #button {
  15. width: 50px;
  16. height: 50px;
  17. }
  19. #text {
  20. height: 50px;
  21. border: 1px solid #000;
  22. background-color: aliceblue;
  23. }
  25. input {
  26. float: left;
  27. }
  29. #text:active {
  30. content: "";
  31. height: 1px;
  32. }
  34. ul {
  35. width: 900px;
  36. margin: 0 auto;
  37. }
  39. li {
  40. width: 200px;
  41. height: 200px;
  42. list-style: none;
  43. /* border: 0px solid #000; */
  44. float: left;
  45. /* background-color: antiquewhite; */
  46. }
  48. #ll {
  49. position: relative;
  50. }
  52. #ll img {
  53. position: absolute;
  54. bottom: 16px;
  55. }
  57. #z12 {
  58. position: absolute;
  59. font-size: 12px;
  60. bottom: 0px;
  61. }
  62. </style>
  63. </head>
  65. <body>
  66. <div style="overflow: hidden">
  67. <input type="text" id="text" value="" />
  68. <input type="button" id="button" value="搜索" />
  69. </div>
  71. <ul>
  72. <!-- 一级导航 -->
  73. </ul>
  74. <div id="pot">
  75. <!-- 二级导航 -->
  76. <!-- 分块，用ul表示 -->
  77. </div>
  78. </body>
  79. <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  80. <script>
  81. //eb59864e6e6e0c08d7ac6dab6dfa9b5e
  82. //页面需引入jquery库 https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
  83. $(document).ready(function () {
  84. let oInput = document.getElementById("text");
  85. let oUL = document.querySelector("ul");
  86. let oDiv = document.getElementById("pot");
  88. $("#button").click(function () {
  89. //点击页面上id为button的按钮发送请求
  90. let value = oInput.value;
  91. console.log(value);
  92. $.post(
  93. "http://api.tianapi.com/sicprobe/index",
  94. {
  95. key: "eb59864e6e6e0c08d7ac6dab6dfa9b5e",
  96. num: "10",
  97. word: value,
  98. },
  99. function (data, status) {
  100. // console.log(data);
  101. // console.log(data.newslist);
  102. // console.log(data.newslist[0]);
  103. // console.log(data.newslist[0].picUrl);
  104. // console.log(data.newslist.length);
  106. let dataa = data.newslist;
  107. let str = "";
  108. if (dataa) {
  109. dataa.forEach((item) => {
  110. str += `
  111. <li id='ll'>
  112. <p href="">${item.title}</p>
  113. <br>
  114. <img src="${item.picUrl}" alt="">
  115. <p id='z12'>${item.ctime}</p>
  116. </li>
  117. `;
  118. // console.log(item.picUrl);
  119. });
  120. }
  121. oUL.innerHTML = str;
  122. // console.log(str);
  123. }
  124. );
  125. });
  126. });
  127. </script>
  128. </html>

这个主要是通过获取搜索框内的值，传参来调接口搜索。