[英]calling api with Ajax call
我尝试调用外部 api 资源。
api 资源来自此链接: https : //restcountries.com
这是 javascript 代码:
const getCountry = function(country){
const btn = document.querySelector(".btn-country");
const countriesContainer = document.querySelector(".countries");
const request = new XMLHttpRequest();
request.open("GET", `https://restcountries.com/v3.1/name/${country}`);
request.send();
//console.log(request.responseText);
request.addEventListener("load", function () {
//console.log(this.responseText);
const [data] = JSON.parse(this.responseText);
// console.log(data);
const html = `
<article class="country">
<img class="country__img" src="${data.flags}" />
<div class="country__data">
<h3 class="country__name">${data.name}</h3>
<h4 class="country__region">${data.region}</h4>
<p class="country__row"><span>👫</span>${(
+data.population / 1000000
).toFixed(1)} people</p>
<p class="country__row"><span>🗣️</span>${data.languages}</p>
<p class="country__row"><span>💰</span>${data.currencies}</p>
</div>
</article>
`;
countriesContainer.insertAdjacentHTML("beforeend", html);
countriesContainer.style.opacity = 1;
});
}
getCountry('portugal');
这是 html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<script defer src="./restCountries.js"></script>
<title>Asynchronous JavaScript</title>
</head>
<body>
<main class="container">
<div class="countries">
</div>
<!-- <button class="btn-country">Where am I?</button> -->
<div class="images"></div>
</main>
</body>
</html>
我看到数据是在 chrome 工具中返回的。
但我仍然收到此错误:
[object%20Object]:1 GET http://127.0.0.1:5500/jquery/Algorithms/[object%20Object] 404 (Not Found)
那我必须改变什么?
谢谢
圣。 我很好。
所以这有效:
request.open('GET', `https://restcountries.com/v2/name/${country}`);
感谢您的帮助 :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.