Question

说这个api.football-data.org/v1/competitions包含以下内容

{
    "_links": {
      "teams": {
        "href": "http://api.football-data.org/v1/competitions/444/teams"
      }
    },
    "id": 444,
    "caption": "Campeonato Brasileiro da Série A",
    "league": "BSA"
  },
{
    "_links": {
      "teams": {
        "href": "http://api.football-data.org/v1/competitions/445/teams"
      }
    },
    "id": 445,
    "caption": "Premier League 2017/18",
    "league": "PL"
  }

访问特定团队的最佳方式是什么？我是这样做的，它有效，但我认为它不是很整洁。

HTML

Choose Team: <select id="team">
                <option value="444">Premier League</option>
                <option value="445">Campeonato Brasileiro</option>
            </select>

JavScript

$("#team").change(function(){
    var id = $("#team").val();
    getTeam(id);

});

function getTeam(id){

        $.ajax({
            url: 'http://api.football-data.org/v1/competitions/'+id+'/team',
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                var team= '';
                $.each(data, function(k, v) {
                    team+= '<tr><td>' + v.name+ '</td></tr>';

                });
                $("#team").html(team);

            }
        });
    }

Answer 1

您的解决方案是正确的，但您可以使用API返回的网址。我认为这个API是根据Richardson成熟度模型创建的（更多信息请参见https://martinfowler.com/articles/richardsonMaturityModel.html）。 api-football处于第3级 - 具有超媒体控制 - 因为API告诉我们接下来我们可以做什么（获得团队，让玩家......）

因此，它可以为您的应用带来一些好处：如果api-football改变了某些URL，您的应用程序就不会中断。

如果需要，您可以更改解决方案：

＆＃13;

        var apiKey = '7b35712f29da4dc58a538320e57c12cc';

        $(function () {
            getCompetitions();
            $('#competitions').change(function () {
                var urlTeam = $("#competitions").find("option:selected").attr('data-href');
                getTeam(urlTeam);
            });
        })

        function getCompetitions() {

            $.ajax({
                url: 'http://api.football-data.org/v1/competitions/',
                headers: {
                    "X-Auth-Token":apiKey
                },
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    $.each(data, function (k, v) {
                        $('#competitions').append('<option value="' + v.id + '" data-href="' + v._links.teams.href + '">' + v.caption + '</option>');
                    });
                }
            });
        }

        function getTeam(url)
        {
            $.ajax({
                url: url,
                headers: {
                    "X-Auth-Token":apiKey
                },
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    var team = '';
                    $.each(data.teams, function (k, v) {
                        team += '<tr><td>' + v.name + '</td></tr>';
                    });
                    $("#teams").html(team);
                }
            });
        }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label> Choose Competition: </label>
<select id="competitions">
  <option>Select...</option>
</select> <br />
<label>Teams </label>
<table id="teams">
</table>

＆＃13;

按ID访问API资源

1 个答案: