Это объединенный блог 67-го и 68-го дня, так как мы уехали на выходные, и у меня не хватило времени вести блог на 67-й день, а затем 68-й день был коротким, потому что у меня не хватило энергии для полного дня учебы, а у Фрейи нет. любит спать, когда ее нет дома… не то чтобы она хорошо спала дома.
Сегодня я использовал информацию, которую я узнал об AJAX из учебника на YouTube (https://www.youtube.com/watch?v=rJesac0_Ftw&fbclid=IwAR2v57i-YG2zy_TjIMVOoQqWQKCjqQRHA0yvHxRomM1FqEltlbNbzQ2JCPY), и выполнил задачу, которую поставил передо мной мой муж. .
Вначале я столкнулся с препятствием, так как ссылка, которую он мне прислал, не была настроена так, чтобы разрешить моему веб-сайту, который я создавал, доступ к информации из бэкэнда, который он создал. Я потратил много времени, пытаясь узнать, как это исправить, и пытаясь понять, было ли это частью проблемы, но оказалось, что он просто неправильно настроил это для меня. Затем он прислал новую ссылку, и я вернулся на правильный путь.
Я снова посмотрел видео, но изменил его, чтобы он соответствовал контексту моей ситуации, что было хорошо, поскольку оно показало мне, что я понимаю разницу между вызовом информации из массива и из объекта, поскольку бэкэнд видео хранился в массиве, а бэкэнд я был объектом.
Все остальное было очень похоже, за исключением того, что у меня был только один язык для вызова, поэтому мне не нужно было настраивать цикл For для перебора нескольких вариантов.
Чтобы объяснить приведенный ниже код, я создал переменную, которая связана с div в HTML, и создал переменную для ссылки на кнопку с помощью document.getElementById. Затем я добавил eventListener к кнопке, когда она была нажата для запуска функции. Внутри функции я создал переменную, связанную с new XMLHttpRequest(), затем использовал .open для этой переменной и использовал GET для получения информации по ссылке, которую мне прислал муж. Когда он загрузился, функция запустилась, она получила информацию из данных JSON и сохранила ее в переменной с именем ourData. Затем на этих наших данных была запущена функция renderHTML. Функция renderHTML связана с div, текст которого я хотел напечатать, и вставляет информацию о вызове HTML из объекта, хранящегося в бэкэнде. И, наконец, запрос был отправлен с использованием ourRequest.send()
var languageContainer = document.getElementById("languages-info")
var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://gist.githubusercontent.com/philals/aefc1b1b7c5fc9f65d3915add2383483/raw/7e461d16e3243203cdc75c0d756a4ec076852948/hello.json?fbclid=IwAR3_t1AZJXYGyZd5K39PgZSzqhdhYpbLF-IRIzTNE6xh5V4m87Uj9Bu6Tik');
ourRequest.onload = function () {
var ourData = JSON.parse(ourRequest.responseText);
renderHTML(ourData);
};
ourRequest.send();
});
function renderHTML(data) {
languageContainer.insertAdjacentHTML('beforeend', 'You can say hi in the language ' + data.language + ' you say ' + data.text);
}
Затем, когда кнопка была нажата на странице, сайт вызывал серверную часть, а затем печатал язык и приветствие на этом языке.
Есть еще кое-что, что нужно сделать с сайтом, но это подождет еще один день.
