выпадающее меню, заполненное из базы данных на странице клиента

Question

Я хочу заполнить данные из базы данных, используя клиентское программирование либо на HTML, либо на javascript.Я посмотрел в Интернете и получил множество сайтов, на которых приведены примеры на стороне сервера, например, JSP, ASP или PHP для создания выпадающего меню.Я знаю простой синтаксис для создания выпадающего меню HTML и на других языках.Но я не знаю, как заполнить эти значения выпадающего меню HTML из базы данных.Любой метод, который либо получает данные со страницы JSP, которая выбирает данные из базы данных, и при выборе одного элемента инициирует запрос к странице JSP, которая снова выбирает данные из базы данных, может работать для меня.

Проблема:Я хочу получить доступ к полям базы данных со страницы HTML.Раскрывающийся список html-страницы должен быть заполнен из базы данных, и при выборе определенного значения он должен получать данные, относящиеся к этому параметру.

Любые идеи или ссылки на источники, на которые я должен обратить внимание.

Answer 1

Точно так же вы можете получить общее представление о механизме: как насчет Ajax-вызова, инициируемого прослушивателем событий, как этот (может также использовать событие click или что-то еще):

После загрузки html-документа добавьте прослушиватель событий к наблюдаемому элементу (здесь он может быть изменен) и вызовите функцию при запуске события:

$(document).ready(function() {
    $('#watchedElement').change(callAjaxFunction());
});

Функция для Ajax-вызова: В переменной data вы можете отправить информацию на сервер, чтобы решить, какие опции отправить обратно. Самый простой способ (хотя бы быстрый и грязный) - вернуть (например, «echo» в php) значения параметров в виде обычного текста / html и заменить старые элементы option на них. Я предпочитаю JSON-способы, описанные в ссылке из комментария к вашему вопросу, поскольку у вас гораздо больше контроля над данными, но для первого впечатления вы можете попробовать, если механизм работает для вас в целом:

function callAjaxFunction() {
    $.ajax({
        type: "POST",
        url: url,
        data: { "selectedValue": $('#watchedElement').val() }
        success: function(data) {
            $("#idOfSelectElement").html(data);
        }
        dataType: "HTML"
    });
}

Только для целей тестирования без какой-либо оценки значения, отправляемого на сервер, вы можете отправить обратно две фиктивные опции, подобные этой (пример для простоты - php-файл, и вы даже можете использовать html-файл, который содержит только сам текст):

<?php
echo "<option value='test1'>Test1</option>" .
     "<option value="test2">Test2</option>";
?>

Тем не менее, вероятно, лучше пойти по пути JSON и добавить элемент за элементом, что в дальнейшем упрощает отладку и прочее.