Jquery getJSON Get Data

Question

按下"获取数据"按钮时，我需要使用 JSON 获取种族名称的数据。用于加载 JSONhttp://itweb.fvtc.edu/wetzel/marathon/races/并在div#getResults中显示比赛列表的 URL。

我需要将种族ID作为id属性添加到开始li标签中 价值。例如，Storm King Run比赛将是<li id="1">. 当用户单击此列表中的一个种族时，名称 比赛中的跑步者将显示。使用种族ID，存储为id属性值并附加到resultsURL，以获取 跑步者姓名列表。用于加载 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>