如何使用 ajax/jquery 从 API 获取数据？

Question

Hi Im trying to get data from API using ajax request.嗨，我正在尝试使用 ajax 请求从 API 获取数据。 But I cant visualize/return the data.Please help,This is my code.但我无法可视化/返回数据。请帮助，这是我的代码。 I think the problem is in the success statement because it says that displayName is not property but I think if I want to show info I have to use it.我认为问题出在成功声明中，因为它说 displayName 不是属性，但我认为如果我想显示信息，我必须使用它。 I know maybe it is a stupid question but its new to me and i dont know what to do So please help me.我知道这可能是一个愚蠢的问题，但它对我来说是新的，我不知道该怎么做所以请帮助我。 Im giving a link to the api so you can see if im using it wrong我提供了 api 的链接，所以你可以看看我是否用错了

and this is the api: https://www.songkick.com/developer/event-search这是 api： https://www.songkick.com/developer/event-search

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>MusicApp</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

        <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    </head>

    <body>
        <form>
            <input type="text" id="inputText">
            <button type="button" id="submitBtn" class="btn btn-primary"><span
                    class="glyphicon glyphicon-globe"></span> Search
            </button>
        </form>

        <div id="text"></div>

        <div class="col-sm-8">

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Твоите отбелязвания</h3>
                </div>
                <ul class="list-group" style="min-height:241px;" id="contentList">
                    <li class="list-group-item" style="display:none" id="cloneMe">
                        <div class="col-sm-7 col-xs-6">
                            <span class="label label-success"><span class="current-event"> </span> </span>
                            <h4>Пловдив</h4>
                        </div>
                        <div class="col-sm-3 col-xs-3">
                            <button type="button" class="btn btn-danger pull-right remove-post"><span
                                    class="glyphicon glyphicon-remove"></span><span
                                    class="hidden-xs"> Изтрий</span></button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </body>

    <script>
      $(document).ready(function () {
        var api = "cgpAHIF3s7hB7S3j"

        $('#submitBtn').click(function () {

          artistName = $('#inputText').val()

          $.ajax({
                   method:  "GET",
                   url:     "https://api.songkick.com/api/3.0/events.json?apikey=" + api + "&artist_name=" + artistName + "&min_date=2009-10-01&max_date=2009-10-30",
                   success: function (resp) {
                     var miniMe = $('#cloneMe').clone()

                     miniMe.attr('id', '')
                     miniMe.find('h4').text(artistName)
                     miniMe.find('.current-event').html(resp.displayName)
                     miniMe.find('button').click(function () {
                       miniMe.remove()

                     })

                     miniMe.show()

                     $('#contentList').append(miniMe)


                   },
                   error:   function () {
                     alert("Something went wrong!")
                   }
                 })
          return false
        })
      })
    </script>
</html>

Answer 1

Looking at the response from the api it looks like the displayname is part of the "artist" as opposed to the parent object, therefore "resp.artist.displayName" should work.查看来自 api 的响应，看起来显示名称是“艺术家”的一部分，而不是父 object，因此“resp.artist.displayName”应该可以工作。 If you add a debugger into the success method then you could have a look at the response object to make sure.如果您将调试器添加到成功方法中，那么您可以查看响应 object 以确保。

{
    "resultsPage": {
      "results": {
        "artist": [
          {
            "id":253846,
            "uri":"http://www.songkick.com/artists/253846-radiohead",
            "displayName":"Radiohead",
            "onTourUntil":"2010-01-01"
          }
        ]
      },
      "totalEntries":1,
      "perPage":50,
      "page":1,
      "status":"ok"
    }
  }

如何使用 ajax/jquery 从 API 获取数据？

问题描述

1 个解决方案

解决方案1
0 2019-11-22 11:18:42

如何使用 ajax/jquery 从 API 获取数据？

问题描述

1 个解决方案

解决方案1 0 2019-11-22 11:18:42

解决方案1
0 2019-11-22 11:18:42