我使用 API 通過選擇訪問城市的地鐵站。
我可以顯示一個站的資訊，第一個（巴拉德）。我想在點擊提交按鈕后顯示我選擇的其他電臺的資訊。但我不知道如何使它起作用。你能幫我嗎？
這是我的代碼：
var link = 'https://api-ratp.pierre-grimaud.fr/v4/';
var apiStations = "https://api-ratp.pierre-grimaud.fr/v4/stations/metros/8";
fetch(apiStations, {
method: "get"
})
.then(response => response.json())
.then(data => {
let allstations = data.result.stations;
let html = '';
for (var i = 0; i < allstations.length; i ) {
html = "<option value=" allstations[i].slug ">" allstations[i].name "</option>"
}
document.getElementById("stationmetro").innerHTML = html;
function Validate() {
var e = document.getElementById("stationmetro");
var metroselect = e.options[e.selectedIndex].text;
var url = this.link 'schedules/metros/8/' metroselect '/A R';
//alert(url);
fetch(url, {
method: "get"
})
.then(response => response.json())
.then(data => {
let test= data.result.schedules;
let dest=''
for (var i = 0; i < test.length; i ) {
dest = "<div id='dataapi' value=> Direction: " test[i].destination " <br>Information :" test[i].message "<br></div>"
}
document.getElementById("results").innerHTML = dest;
var element = document.getElementById("dataapi");
element.style.backgroundColor = "#00FF00";
})
} Validate();
})
* {
padding: 0 auto;
margin: 0 auto;
font-family: 'Arial';
}
section.container {
display: flex;
flex-wrap: wrap;
margin: 10px;
}
section.container .item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 1px 1px 12px rgb(0, 0, 0, 0.2);
border-radius: 20px;
margin: 20px;
padding: 10px;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>testapp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section class="container">
<div class="item" id="select">
<p>Liste dynamique des stations de la ligne 8</p>
<select id="stationmetro"></select>
<input type="submit" id="btnSubmit" value="Afficher les informations" onclick="return Validate()" />
</div>
<div class="item" id="results">
</div>
<script src="main.js"></script>
</body>
</html>uj5u.com熱心網友回復：
您的代碼中存在一些語法問題。請使用以下語法更新提交按鈕
<input type="submit" id="btnSubmit" value="Afficher les informations" onclick="Validate()" />
并使用提供的腳本修改過去的腳本并嘗試。
var link = 'https://api-ratp.pierre-grimaud.fr/v4/';
var apiStations = "https://api-ratp.pierre-grimaud.fr/v4/stations/metros/8";
fetch(apiStations, {
method: "get"
})
.then(response => response.json())
.then(data => {
let allstations = data.result.stations;
let html = '';
for (var i = 0; i < allstations.length; i ) {
html = "<option value=" allstations[i].slug ">" allstations[i].name "</option>"
}
document.getElementById("stationmetro").innerHTML = html;
Validate();
})
function Validate() {
document.getElementById("results").innerHTML =""
var e = document.getElementById("stationmetro");
var metroselect = e.options[e.selectedIndex].text;
var url = this.link 'schedules/metros/8/' metroselect '/A R';
//alert(url);
fetch(url, {
method: "get"
})
.then(response => response.json())
.then(data => {
let test= data.result.schedules;
let dest=''
for (var i = 0; i < test.length; i ) {
dest = "<div id='dataapi' value=> Direction: " test[i].destination " <br>Information :" test[i].message "<br></div>"
}
document.getElementById("results").innerHTML = dest;
var element = document.getElementById("dataapi");
element.style.backgroundColor = "#00FF00";
})
}轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/317234.html
標籤：javascript html json 接口
上一篇："連接沒有關閉。連接的當前狀態是開放的"-MsAccessVisualBasic-VisualStudio2010