通过ID访问API资源

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>

JavaScript

$("#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返回的URL。我认为这个应用编程接口是根据Richardson成熟度模型创建的(更多信息在这里：https://martinfowler.com/articles/richardsonMaturityModel.html)。因为API告诉我们下一步可以做什么(获取球队，获取球员...)，所以api-football处于第三级--带有超媒体控件。

因此，它可以为您的应用程序带来一些好处:即使api-football更改了某些URL，您的应用程序也不会中断。

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

​

        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);
                }
            });
        }

<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>

​