Заполните раскрывающийся список с помощью AJAX JSON (простой пример)

Добро пожаловать в краткое руководство о том, как заполнить раскрывающийся список HTML с помощью AJAX и JSON. Нужно динамически загружать выпадающие параметры с сервера? Нет проблем, на самом деле это простой процесс — читайте пример!

ВАРИАНТЫ ВЫПАДАЮЩЕГО СПИСКА AJAX LOAD

Хорошо, давайте теперь перейдем к примеру динамической загрузки параметров раскрывающегося списка с использованием AJAX и JSON.

ЧАСТЬ 1) HTML

вставьте в свой html файл:

Здесь не на что смотреть, просто обычный пустой <select> без вариантов.

ЧАСТЬ 2A) AJAX FETCH

Создайте файл для js и вставьте.

// ПОЛУЧИТЬ ДАННЫЕ С СЕРВЕРА
fetch("data.json")
// РАЗБИРАТЬ JSON
.then(res => res.json())
// ЗАПУСК ДАННЫХ И СОЗДАНИЕ ВАРИАНТОВ
.then(data => {
let select = document.getElementById("demo");
data.forEach((item, i) => {
let option = document.createElement("option");
option.innerHTML = item;
select.appendChild(option);
});
});

Чтобы отправить запрос AJAX на сервер, мы можем использовать fetch(). Сначала это кажется сложным, но сохраняйте спокойствие и смотрите внимательно.
1. Укажите URL-адрес для получения данных.
2. Разберите ответ JSON от сервера.
3. Наконец, проанализируйте проанализированный массив данных и создайте параметры.

ЧАСТЬ 3) AJAX XML HTTP ЗАПРОС

Создайте ещё один js файл.

// НОВЫЙ ОБЪЕКТ XMLHTTPREQUEST
var xhr = new XMLHttpRequest();
xhr.open("GET", "data.json");
// РАЗБИРАЙТЕ JSON и СОЗДАВАЙТЕ ВАРИАНТЫ
xhr.onload = () => {
let data = JSON.parse(xhr.response),
select = document.getElementById("demo");
data.forEach((item, i) => {
let option = document.createElement("option");
option.innerHTML = item;
select.appendChild(option);
});
};
// запустить
xhr.send();

В качестве альтернативы мы также можем использовать старый добрый XMLHttpRequestзапрос для запуска AJAX-запроса. Немного многословно, но делает то же самое, что и fetch.

ЧАСТЬ 4) ДАННЫЕ JSON

Создайте файл data.json с таким содержимым.

[
"Apple",
"Blueberry",
"Cherry",
"Durian",
"Elderberry"
]

Не забудьте подключить внешние js файлы.
подключайте файлы по очереди.
с начало посмотрите один скрипт потом поменяйте на второй.