Использование HTML, CSS и JavaScript Fetch для отправки POST-запроса к службе API
У меня есть задание по использованию JavaScript API. Я ничего не знаю об API JavaScript. Может кто-нибудь мне помочь? Я написал страницу входа с помощью HTML-кода CSS. А вот второй этап задания:
- При нажатии кнопки входа на странице входа значения, введенные при вводе имени пользователя и пароля, будут получены с помощью JavaScript, и запрос будет отправлен в службу здесь https://fakestoreapi.com/docs#a -войдите. При поступлении ответа от этого сервиса будет произведено перенаправление на страницу информационной панели со страницы входа в систему.
Я новичок в программном обеспечении, я искал видео для обучения, но не смог найти его для страницы входа. Может кто-нибудь мне помочь.
Мне удалось создать страницу входа, используя только HTML CSS.
Измените это, чтобы получить значения из вашего HTML: username: "mor_2314", password: "83r5^_" и для этого используйте addEventListener в событии отправки формы.
@mplungjan Я не знаю, как добавить это на свою страницу входа (которую я написал с помощью html css)
Я только что тебе сказал. Найдите отправить событие и addEventListener
Например, это stackoverflow.com/questions/45370120/… - но используя addEventListener вместо встроенной обработки событий - см. мои комментарии к ответу по ссылке
Я рассмотрю это сейчас. Большое спасибо
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вот как бы я это реализовал
myform.addEventListener("submit", function(evt) {
evt.preventDefault();
let fields = this.querySelectorAll("[name]");
let obj = {};
for (let field of fields) {
obj[field.name] = field.value;
}
fetch('https://fakestoreapi.com/auth/login',{
method:'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body:JSON.stringify(obj)
})
.then(res=>res.json())
.then(json=>console.info(json))
});<form id = "myform">
<input type = "text" placeholder = "username" name = "username" value = "mor_2314">
<input type = "password" placeholder = "password" name = "password" value = "83r5^_">
<input type = "submit" value = "login">
</form>Я создал для нее форму и событие отправки. Я предотвращаюDefault в событии отправки, чтобы мы не выполняли обратную передачу. Мы также указываем, что наши значения — это JSON, и преобразуем собранные значения в JSON.
Как я могу добавить это на свою страницу index.html или мне следует создать новый файл javascript? и большое спасибо @lajos-arpad
@Элал, вы можете просто обернуть тег <script> вокруг части Javascript, например <script>...</script>. Если этот ответ сработает, вы можете принять его как правильный ответ.
@Lajos: Как мне задавать вопросы по домашнему заданию и отвечать на них
Пожалуйста, проверьте это прежде всего:
- https://www.w3schools.com/jsref/met_element_addeventlistener.asp
- https://www.w3schools.com/html/html_forms.asp
- https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
В своем вопросе вы сказали, что кодируете это с использованием html и css, поэтому должен быть атрибут <form>, и поскольку вы не отправляете внутренний сервер, я думаю, это подойдет:
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", function() {
loginform.addEventListener("submit", function(event) {
event.preventDefault()
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
const data = {
username,
password
}
fetch('https://fakestoreapi.com/auth/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(res => res.json())
.then(json => console.info(json))
.catch(err => console.info(err.message));
});
});
</script>
</head>
<body>
<form id = "loginform">
<input type = "text" placeholder = "username" id = "username" name = "username" value = "mor_2314">
<input type = "text" placeholder = "password" id = "password" name = "password" value = "83r5^_">
<input type = "submit" value = "login">
</form>
</body>
</html>Код, представленный здесь https://fakestoreapi.com/docs#a-login не имеет header type метода, не забудьте добавить его. После получения данных вам следует изменить реакцию кода в каждом соответствующем разделе. .
В случае успеха возвращается формат JSON:
Неудачный случай возвращает ошибку (и, по-видимому, HTML-страницу), поэтому я использую .catch, чтобы ее отловить:
Надеюсь это поможет!
Я настоятельно рекомендую вам использовать событие отправки формы. Если нет, то теги формы даже не нужны
Нет, ты не сделал. Пожалуйста, НЕ используйте событие нажатия кнопки отправки, а вместо этого используйте событие отправки формы плюс event.preventDefault(), как это сделал другой ответ. Кроме того, w3schools — не лучший ресурс. МДН это хорошо
@mplungjan, спасибо. Что касается части, которой ответ нравится, как и другой ответ, я писал свой ответ во время и после выбранного сообщения, но если мой ответ слишком плох, я с радостью удалю его.
Не проблема. Это просто моя любимая мозоль, когда люди используют встроенные обработчики событий или нажатия кнопок в форме... DOMContentLoaded - отличная идея
Я вставил отправленные вами коды в свой файл index.html. Затем я запустил его, и да, когда введены правильный пароль и имя пользователя, он сначала отображается, как показано на изображении ({token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOjIsI…M5OH0.1PXy98iAn6rKUlh9D9qQU_6Fx65JNel3LLL1G 2We3O8'} но когда я ввожу неправильно , index.html:17 POST fakestoreapi.com/auth/login 401 (неавторизованный) (анонимно) @ index.html:17 index.html:26 Неожиданный токен 'u', "имя пользователя o"... нет действительный JSON