Заполните раскрывающийся список с помощью 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 файл.
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 файлы.
подключайте файлы по очереди.
с начало посмотрите один скрипт потом поменяйте на второй.
