我正在構建一個簡單的網頁，用戶可以在其中在文本欄位中輸入年份并顯示該年份的 F1 比賽串列。
我從這個公共 API 獲取我的資料： http: //ergast.com/mrd/我需要在 vanilla JS 中實作這一點。我不想使用 jQuery。
到目前為止，我已經嘗試了 fetch 方法，并且可以控制臺日志：
fetch('http://ergast.com/api/f1/2020.json')
.then(response => response.json())
.then(data => console.log(data));
這向我展示了 2020 年的所有比賽。
但是我需要用戶輸入年份，然后使用 API 進行查詢，然后顯示結果。
HTML 如下所示：
<form>
<label>
<span>Full name</span>
<input type="text" id="test" placeholder="">
</label>
<button type="submit" id="form-submit">
Button
</button>
</form>
SO上已經有很多類似的問題，但沒有一個對我有幫助。
編輯
我還需要嘗試訪問任何給定年份的比賽結果，比賽結果嵌套在陣列 > data.MRData.RaceTable.Races.0.Results 中，我不確定如何訪問這些值。
uj5u.com熱心網友回復：
這是一種方法。不過，您需要考慮如何顯示資料。許多段落不是很用戶友好。
let body = document.querySelector('body');
document.querySelector("form").addEventListener('submit', (e) => {
const year = document.getElementById('year').value;
e.preventDefault();
fetch(`https://ergast.com/api/f1/${year}.json`)
.then(response => response.json())
.then(data => {
(data.MRData.RaceTable.Races).forEach(races => {
for(race in races) {
let para = document.createElement('p');
para.innerText = races[race];
body.appendChild(para);
}
})
})
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<label>
<span>Year</span>
<input type="text" id="year" placeholder="">
</label>
<button type="submit" id="form-submit">
Button
</button>
</form>
<script src="./script.js"></script>
</body>
</html>uj5u.com熱心網友回復：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
fieldset {
margin: 10px;
}
</style>
</head>
<body>
<form>
<label>
<span>Year</span>
<input value="2020" type="text" id="year" placeholder="type a year" />
</label>
<button type="submit" id="form-submit">
Button
</button>
</form>
<div id="result"></div>
<script>
const result = document.getElementById("result");
document.querySelector("form").addEventListener("submit", (e) => {
e.preventDefault();
const year = document.getElementById("year").value;
fetch("http://ergast.com/api/f1/" year ".json")
.then((response) => response.json())
.then((data) => {
result.innerHTML = `<b>results for ${year}</b>`;
data.MRData.RaceTable.Races.forEach((race) => {
result.innerHTML = `
<fieldset>
<h4> ${race.raceName} </h4>
<a target="_blank" href="${race.Circuit.url}"> ${race.Circuit.circuitName} </a>
<p> ${race.date} - ${race.Circuit.Location.country} </p>
</fieldset>`
});
});
});
</script>
</body>
</html>uj5u.com熱心網友回復：
API URL 只是一個字串，因此最簡單的方法是在表單中添加一個按鈕并將 API 呼叫放在onclick()按鈕的事件屬性中。
<form>
<label>
<span>Full name</span>
<input type="text" id="test">
</label>
<button id="form-submit" onclick="apiFetcher()">
Fetch!
</button>
</form>
<p id="result"></>
以及 JS 函式：
function apiFetcher()
{
var year = document.getElementById("test").value;
fetch("http://ergast.com/api/f1/" year ".json")
.then(response => response.json())
.then(data => document.getElementById("result").innerText = data);
}
請注意，獲取元素值的方法大約或超過 10 種，
input但對于呼叫 API ，無論您如何獲取值，您都必須將用戶輸入的年份連接到 URL 的其余部分。
通過不使用<button type="submit">但簡單<button>的方式，您無需處理默認事件。
uj5u.com熱心網友回復：
// dom element references
const myBtn = document.getElementById("form-submit")
const myInput = document.getElementById("test")
myBtn.addEventListener("click", (event)=>{
event.preventDefault()
const text = myInput.value;
myInput.value=""
fetch(`http://ergast.com/api/f1/${text}.json`)
.then(response => response.json())
.then(data => {
console.log(data)
document.getElementById("data-here").innerText= data.MRData.RaceTable.Races[0].Circuit.Location.country;
});
})<form>
<label>
<span>Year</span>
<input min="1980" max="2022" type="number" id="test" placeholder="" value="2020">
</label>
<button type="submit" id="form-submit">
Button
</button>
</form>
<div id="data-here"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/450072.html
標籤：javascript php html json api