jQuery从网易云接口获取数据-Jquery-前端日记簿

首页 Jquery 正文

jQuery从网易云接口获取数据

2023-10-06 93

一 . 获取热门歌手

从文档中可以查找到我们需要单独接口有一个可选参数我们可以随机写入也可以通过input框的方式去写入

视图层里写俩个标签发送请求跟接收展示数据

点击按钮之后发送Ajax请求将我们从数据中获取到的数据在控制台中打印出来

将对象中的artists数组取出进行遍历将里面的歌手拿出然后创建新标签依次将li存入 list当中

然后通过html()方法将list添加达到ul当中

二 . 获取歌手单曲

在文档中可以了解到获取歌手单曲需要传入歌手的id

我们查看到一下上一个接口获取歌手中可以查看到歌手的id 可以通过遍历的方式一起打印出来

然后我们写一个输入框按钮以及ul标签

    <input type="text" id="get-id" placeholder="请输入要获取歌手的id" />
      <button id="getMuce">获取歌手单曲</button>
      <ul id="muceList"></ul>

然后我们在input写入歌手id之后点击发送Ajax请求先获取输入框中的id 将他传送过去、

返回数据之后在控制台打印出来

$("#getMuce").click(function () {
    let id = $("#get-id").val();
    $.ajax({
      url: "http://localhost:3000/artists",
      data: { id: id },
      type: "POST",
      success: function (result) {
        console.log(result);
        let data = result.hotSongs;
        let list = "";
        $.each(data, function (index, item) {
          list += "<li>" + item.name + "</li>";
        });
        $("#muceList").html(list);
      },
    });
  });

通过控制台中的信息我们可以看出需要的内容在hotSongs数组中我们将它拿出来进行遍历显示在页面当中

效果图：

三 . 获取歌手热门50单曲

同样是需要歌手id 基于上一个接口的写法我们只需要对接口进行一个更改以及获取的内容存储热门歌曲的数据进行有一个更改就可以拿出我们需要的

这样我们就可以将歌手的50热门歌曲展示

 $("#getHous").click(function () {
    let id = $("#get-id").val();
    $.ajax({
      type: "POST",
      data: { id: id },
      url: "http://localhost:3000/artist/top/song",
      success: function (result) {
        console.log(result);
        let data = result.songs;
        let listHtml = "";
        $.each(data, function (index, item) {
          listHtml += "<li>" + item.name + "</li>";
        });
        $("#listHous").html(listHtml);
      },
    });
  });

四 . 获取热门评论

通过文档我们可以看出获取热门评论之前需要传入歌曲id

在上一个获取歌曲中在打印的对象中我们可以看到每一个歌曲名后面跟着id

可以在遍历的时候将id一起拿出来

在输入框中写入拿出来的id 点击按钮发送Ajax请求获取到输入框中的val 然后将需要传入的参数写好将返回的数据打在控制台进行查看

 $("#pl").click(function () {
    let id = $("#pl-id").val();
    $.ajax({
      type: "POST",
      data: { id: id, type: 0, limit: 30 },
      url: "http://localhost:3000/comment/hot",
      success: function (result) {
        console.log(result);
        let data = result.hotComments;
        let listHtml = "";
        $.each(data, function (index, item) {
          listHtml +=
            "<li>" + item.content + "---" + "时间" + item.timeStr + "</li>";
        });
        $("#plList").html(listHtml);
      },
    });
  });

可以看得到这次外面需要拿得内容在hotComments数组当中只要将这个数拿出来进行遍历就可以展示在页面当中

效果图：

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>获取热门评论</title>
    <style>
      .box {
        width: 500px;
        position: absolute;
        top: 0;
        left: 30%;
      }
    </style>
  </head>
  <body>
    <button id="getList">获取热门歌手</button>
    <ol id="list"></ol>
    <input
      type="text"
      name=""
      id="get-id"
      placeholder="输入歌手id
    "
    />
    <button id="getHous">歌手热门50单曲</button>
    <ol id="listHous"></ol>
    <div class="box">
      <h2>评论</h2>
      <input type="text" id="pl-id" />
      <button id="pl">热门评论</button>
      <ol id="plList"></ol>
    </div>
  </body>
</html>
<script src="../js/jquery.js"></script>
<script>
  $("#getList").click(function () {
    $.ajax({
      url: "http://localhost:3000/top/artists",
      data: { limit: 10 },
      type: "POST",
      success: function (result) {
        console.log(result);
        let data = result.artists;
        let list = "";
        $.each(data, function (index, item) {
          list += "<li>" + item.name + "----" + "id" + item.id + "</li>";
        });
        $("#list").html(list);
      },
    });
  });
  $("#getHous").click(function () {
    let id = $("#get-id").val();
    $.ajax({
      type: "POST",
      data: { id: id },
      url: "http://localhost:3000/artist/top/song",
      success: function (result) {
        console.log(result);
        let data = result.songs;
        let listHtml = "";
        $.each(data, function (index, item) {
          listHtml += "<li>" + item.name + "---" + "id" + item.id + "</li>";
        });
        $("#listHous").html(listHtml);
      },
    });
  });
  $("#pl").click(function () {
    let id = $("#pl-id").val();
    $.ajax({
      type: "POST",
      data: { id: id, type: 0, limit: 30 },
      url: "http://localhost:3000/comment/hot",
      success: function (result) {
        console.log(result);
        let data = result.hotComments;
        let listHtml = "";
        $.each(data, function (index, item) {
          listHtml +=
            "<li>" + item.content + "---" + "时间" + item.timeStr + "</li>";
        });
        $("#plList").html(listHtml);
      },
    });
  });
</script>

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=80

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。