时间戳

首页 > 解决方案 > 在发出 API 请求时更改统计信息

javascript - 在发出 API 请求时更改统计信息

问题描述

我正在使用以下 API 发出请求并在我的网站上显示有关利物浦队的一些统计数据。

    var request = new XMLHttpRequest()

    request.open('GET', 'https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=liverpool', true)

    request.onload = function() {
      Begin accessing JSON data here
        var data = JSON.parse(this.response);
        var team = data.teams[0].strTeam;
        var league = data.teams[0].strLeague;
        var stadium = data.teams[0].strStadium;
        var info = data.teams[0].strStadiumDescription;
        var teamBadge = data.teams[0].strTeamBadge;
        var teamJersey = data.teams[0].strTeamJersey;

    document.getElementById("demo").innerHTML = team ;
    document.getElementById("demo2").innerHTML = league ;
    document.getElementById("demo3").innerHTML = stadium ;
    document.getElementById("demo4").innerHTML = info ;
    document.getElementById("demo5").src = teamBadge;
    document.getElementById("demo6").src = teamJersey;

我想在我的网站上做一个下拉菜单，这样我就可以选择另一个团队，它会自动显示新选择的团队的统计数据。目前我只是手动更改 API 请求字符串中的名称，例如 -liverpool 到 Burnley 以显示 Burnley 统计信息

标签： javascriptapi

解决方案

您可以使用这样的处理程序进行下拉菜单。您正在监听onchange事件并将更新的select对象传递给函数onTeamChange。然后您可以获取用户更改为的值并使用它来构造您的 GET 请求。

function onTeamChange(teamList) {
  const selectedTeam = teamList.value;
  console.log(selectedTeam);

  // Call existing code here and modify url:
  const teamUrl = `https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${selectedTeam}`;
}

<select id="team-selector" onchange="onTeamChange(this)">
  <option value="liverpool">Liverpool</option>
  <option value="burnley">Burnley</option>
  <option value="arsenal">Best Team Ever</option>
</select>

推荐阅读