Question

当按下 Get Data 按钮时，我需要使用JSON获取种族名称的数据。用于加载JSON http://itweb.fvtc.edu/wetzel/marathon/races/并在div#getResults。

中显示竞赛列表的URL

我需要将竞赛ID添加到开始li标记中作为id属性值。例如，Storm King Run种族将是<li id="1">。当用户点击此列表中的一个比赛时，其名称为比赛中的跑步者将会出现。使用存储为ID的竞赛id 属性值并附加到results URL，以获取数据跑步者名单。加载JSON的URL是： http://itweb.fvtc.edu/wetzel/marathon/results/<add race ID>

（注意：比赛ID号需要在结尾处连接能够访问数据的URL。）

显示div#showResults下的信息。有人可以告诉我哪里出错了吗？

$("getList").click(function() {
  $.getJSON("http://itweb.fvtc.edu/wetzel/marathon/races/", function(json) {
    $.each(result, function(i, field) {
      $("showResults").append(field + " ");
    });
  });
});

#getResults li {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

li {
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>

<button id="getList" type="button">Get Data</button>
<div>
  <ul id='getResults'></ul>
</div>
<div>
  <ul id='showResults'></ul>
</div>

Answer 1

您希望在点击按钮时显示所有比赛名称，并且当您点击种族名称时，您要向API发送请求并获取结果以及相应的ID，如果这是正确的，那么您可以使用以下内容，它可能无法在StackOverflow上显示所需的结果，并在控制台中显示类似的内容

混合内容：页面位于 'Jquery getJSON Get Data' 是通过HTTPS加载的，但是请求了一个不安全的XMLHttpRequest 端点'http://itweb.fvtc.edu/wetzel/marathon/races/'。这个请求已被封锁;内容必须通过HTTPS提供。

并且API不支持https，因此您可能必须在您的计算机上本地运行它来测试它我已经使用来自服务器的硬编码JSON响应进行了测试。希望它有所帮助。

$("#getList").on('click', function() {

  $.getJSON("http://itweb.fvtc.edu/wetzel/marathon/races/", function(result) {

    var races = result.races;
    $.each(races, function(index, race) {

      var race_id = race.id;
      var race_name = race.race_name;

      $("<li></li>", {
        id: race_id
      }).html(race_name).appendTo("#getResults");

      $("#" + race_id).on('click', function() {
        $.getJSON("http://itweb.fvtc.edu/wetzel/marathon/results/" +
          race_id + '/',
          function(race_result) {
            var results = race_result.results;
            $('#showResults').empty();
            $.each(results, function(i, runners) {
              $("<li></li>").html(runners.name).prependTo(
                "#showResults");
            });
          });
      });
    });

  });
});

#getResults li {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

ul {
  display: inline-block;
  max-height: 150px;
  overflow: auto;
}

li {
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button id="getList" type="button">Get Data</button>
<div>
  <ul id='getResults'></ul>


  <ul id='showResults'></ul>
</div>

Jquery getJSON获取数据

1 个答案: