[英]Can anyone tell me why I'm getting a 404 error in the console?
I'm making an api call to the rescountries api.我正在对 rescountries api 进行 api 调用。 When I open up the console.
当我打开控制台时。 I get the following error "Failed to load resource: the server responded with a status of 404 (Not Found)" However I seem to be getting an object printed out in the console that's coming from the restcountries api via the "console.log(data)" line.
我收到以下错误“无法加载资源:服务器响应状态为 404(未找到)”但是我似乎正在控制台中打印出一个对象,该对象来自 restcountries api 通过“console.log(数据)”行。 Is it to do with the API itself or something I did in my code?
是与 API 本身有关还是与我在代码中所做的有关? Thanks in advance.
提前致谢。
"use strict";
const btn = document.querySelector(".btn-country");
const countriesContainer = document.querySelector(".countries");
const getCountryData = function (country) {
const request = new XMLHttpRequest();
request.open("GET", `https://restcountries.com/v3.1/name/${country}`);
request.send();
request.addEventListener("load", function () {
const [data] = JSON.parse(this.responseText);
console.log(data);
const html = `<article class="country">
<img class="country__img" src="${data.flag}"/>
<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 / 100000
).toFixed(1)}</p>
<p class="country__row"><span>🗣️</span>${data.languages.eng}</p>
<p class="country__row"><span>💰</span>${data.currencies.symbol}</p>
</div>
</article>
`;
countriesContainer.insertAdjacentHTML("beforeend", html);
countriesContainer.lastElementChild.opacity = 1;
});
};
getCountryData("GB");
getCountryData("usa");
You have 404 error because you have following divs <img class="country__img" src="🇺🇸">
The src
attribute should be an URL - not a symbol.你有 404 错误,因为你有以下 div
<img class="country__img" src="🇺🇸">
src
属性应该是一个 URL - 而不是一个符号。 You have 2 calls one for UK and one for USA so you will have 2 such images and 2 404 Not found
errors will appear.您有 2 个电话,一个是英国,一个是美国,因此您将有 2 个这样的图像,并且会出现 2
404 Not found
错误。
So your line of code where you produce this image ie <img class="country__img" src="${data.flag}"/>
should be probably <div>${data.flag}</div>
or similar.因此,您生成此图像的代码行即
<img class="country__img" src="${data.flag}"/>
应该可能是<div>${data.flag}</div>
或类似的。
Example:例子:
"use strict"; const btn = document.querySelector(".btn-country"); const countriesContainer = document.querySelector(".countries"); const getCountryData = function (country) { const request = new XMLHttpRequest(); request.open("GET", `https://restcountries.com/v3.1/name/${country}`); request.send(); request.addEventListener("load", function () { const [data] = JSON.parse(this.responseText); console.log(data); const html = `<article class="country"> <div class="country__img">${data.flag}</div> <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 / 100000 ).toFixed(1)}</p> <p class="country__row"><span>🗣️</span>${data.languages.eng}</p> <p class="country__row"><span>💰</span>${data.currencies.symbol}</p> </div> </article> `; countriesContainer.insertAdjacentHTML("beforeend", html); countriesContainer.lastElementChild.opacity = 1; }); }; getCountryData("GB"); getCountryData("usa");
<div class="countries"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.