Фронтенд
2. Создадим ещё один файл с названием script.js – здесь будет происходить загрузка капчи и её отправка на сервер (пока что локальный) для проверки. При загрузке страницы будет автоматически загружаться капча.
- Пользователь вводит текст с капчи.
- При нажатии кнопки "Проверить" отправляется запрос на сервер для проверки текста.
- В случае успеха показывается сообщение о правильности ввода, а кнопка становится неактивной.
- В случае ошибки показывается сообщение об ошибке, и загружается новая капча.
- Пользователь может обновить капчу вручную, нажав на кнопку "Обновить".
Объявим переменную captchaId, она будет хранить уникальный идентификатор капчи. Этот идентификатор используется для проверки введенного текста с конкретной капчей на сервере:
let captchaId = "";
3. Создадим функцию fetchCaptcha():
function fetchCaptcha() {
fetch("http://localhost:3000/generate-captcha")
.then((response) => response.json())
.then((data) => {
captchaId = data.captchaId;
document.getElementById("captchaImage").src = data.captchaImage;
})
.catch((error) => console.error("Ошибка загрузки капчи:", error));
}
- Здесь мы отправляем GET-запрос на сервер по адресу http://localhost:3000/generate-captcha для получения нового изображения капчи.
- .then((response) => response.json()): преобразуем ответ от сервера в формат JSON.
- .then((data) => {...}): обработаем полученные данные:
captchaId = data.captchaId: присваивает переменной captchaId значение из ответа сервера. Этот идентификатор используется для проверки правильности введенного текста.
document.getElementById("captchaImage").src = data.captchaImage: изменяет источник изображения с капчей на тот, который пришел с сервера (например, URL изображения).
catch((error) => console.error("Ошибка загрузки капчи:", error)): если произошла ошибка при запросе или обработке ответа, она будет выведена в консоль.
4. Добавим обработчик события для кнопки отправки:
document.getElementById("submitButton").addEventListener("click", () => {
const userInput = document.getElementById("captchaInput").value.trim();
if (!userInput) return;
fetch("http://localhost:3000/verify-captcha", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ userInput, captchaId }),
})
.then((response) => response.json())
.then((result) => {
if (result.success) {
document.getElementById("successMessage").style.display = "block";
document.getElementById("errorMessage").style.display = "none";
document.getElementById("submitButton").disabled = true;
} else {
document.getElementById("successMessage").style.display = "none";
document.getElementById("errorMessage").style.display = "block";
fetchCaptcha();
}
})
.catch((error) => console.error("Ошибка при проверке капчи:", error));
});
document.getElementById("submitButton").addEventListener("click", () => {...}): добавляет обработчик события для кнопки "Проверить", которая отправляет введенные данные на сервер для проверки.
const userInput = document.getElementById("captchaInput").value.trim();: получает введенное пользователем значение из поля ввода и удаляет лишние пробелы.
if (!userInput) return;: если поле ввода пустое, обработчик прекращает выполнение.
fetch("http://localhost:3000/verify-captcha", {...}): отправляет POST-запрос на сервер для проверки введенного текста с капчи.
В запросе передаются:
userInput: введённый пользователем текст.
captchaId: идентификатор капчи, полученный ранее.
.then((response) => response.json()): обрабатывает ответ сервера (проверка капчи).
.then((result) => {...}): если капча была успешно проверена (result.success):
Показывается сообщение о успешной проверке капчи.
Кнопка "Проверить" становится неактивной (submitButton.disabled = true).
В случае ошибки:
Показывается сообщение об ошибке.
Вызывается функция fetchCaptcha() для загрузки нового изображения капчи.
5. Теперь добавим обработчик события для кнопки обновления капчи:
document
.getElementById("refreshButton")
.addEventListener("click", fetchCaptcha);
При нажатии на эту кнопку будет вызвана функция fetchCaptcha(), которая загрузит новое изображение капчи.
6. Обработчик для поля ввода:
document.getElementById("captchaInput").addEventListener("input", (e) => {
document.getElementById("submitButton").disabled =
e.target.value.trim().length === 0;
});
fetchCaptcha();
При каждом изменении текста в поле (событие input) проверяется длина введенного текста.
Если текст пустой, кнопка "Проверить" становится неактивной (submitButton.disabled = true).
Если текст не пустой, кнопка становится активной (submitButton.disabled = false).
