Поэтому я пытаюсь использовать метод запроса специально, чтобы получить изображение для отображения конкретно флага страны после того, как пользователь вводит страну, из которой он. Я задавал этот вопрос раньше, но никто, кажется, не мог использовать метод запроса для этого. Мне было интересно, если бы мне пришлось использовать BLOB-объектов. Я новичок в javascript, поэтому я учусь. На сайт я отправляю свой запрос: https://www.countryflags.io. Опять же, я не хочу никаких альтернатив. У меня уже есть ответ на это. Я пытаюсь использовать метод запроса специально. Я получаю сообщение об ошибке 127.0.0.1 - - [19 / Apr / 2020 12:56:46] "GET / country_flag; HTTP / 1.1" 404 -. ИДК, что я делаю не так. Любая помощь будет отличной! Спасибо.
personInfo. html
<head>
<meta charset="UTF-8">
<title> Person Information Page </title>
<style>
h2{
text-align: center;
}
label {
display: inline-block;
width: 150px;
text-align: left;
}
</style>
</head>
<body>
<p style="text-decoration: underline;"><a href=http://127.0.0.1:5000/> Back to home </a></p>
<h2 id="displayName" ></h2>
<div class="block">
<label>Born on: </label>
<p id="birthdate"></p>
</div>
<div class="block">
<label>Born in the country: </label>
<p id="country"></p>
</div>
<div class="block">
<label>Country Flag: </label>
<img id="countryFlag" src = country_flag; />
</div>
<script>
var personInfoList = JSON.parse(sessionStorage.getItem("newList1"));
for(let item of personInfoList) {
document.getElementById("displayName").innerHTML = item[0] + " " + item[1];
document.getElementById("birthdate").innerHTML = item[2];
document.getElementById("country").innerHTML = item[3];
const request = new Request('https://www.countryflags.io/${item[3]}/shiny/64.png',);
fetch(request)
.then(response => {
if (response.status === 200) {
country_flag = 'https://www.countryflags.io/${item[3]}/shiny/64.png';
document.getElementById("countryFlag").src = country_flag;
return response.json();
} else {
throw new Error('Something went wrong on api server!');
}
})
.then(response => {
console.debug(response);
// ...
}).catch(error => {
console.error(error);
});
}
</script>
</body>
</html>
add_name. html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Add Name Page </title>
<style>
body {
text-align: center;
}
form {
position:relative;
top:20px;
display: inline-block;
}
label {
display: inline-block;
width: 150px;
text-align: left;
}
p {
position: relative;
top: -43px;
left: 410px;
}
</style>
{% extends "navigation.html" %}
{% block content %}
</head>
<body>
<form action="home.html" >
<div class="block">
<label>First name: </label>
<input type='text' input name='firstname' id='firstname'>
</div>
<div class="block">
<label>Last name: </label>
<input type='text' input name='lastname' id='lastname'>
</div>
<div class="block">
<label>Birthday: </label>
<input type='text' input name='birthday' id='birthday' placeholder="mm/dd/yyyy">
</div>
<div class="block">
<label>Country of Origin: </label>
<input type='text' input name='countryOfOrigin' id='countryOfOrigin'>
</div>
<p>
<input type="button" id="add" value="Submit" onclick= "passVal(); window.location.href = '/';">
</p>
</form>
<script>
function passVal() {
var prevValue = localStorage.getItem("newList1");
var newList = [];
if(prevValue) {
newList = JSON.parse(prevValue);
} else {
}
var newFirstName = document.getElementById("firstname").value;
var newLastName = document.getElementById("lastname").value;
var newBirthday = document.getElementById("birthday").value;
var newCOO = document.getElementById("countryOfOrigin").value;
newList.push([newFirstName, newLastName, newBirthday, newCOO]);
sessionStorage.setItem("newList1", JSON.stringify(newList)); }
</script>
</body>
{% endblock %}
</html>