从客户端页面中的数据库填充的下拉菜单

Question

我想使用客户端编程 HTML 或 javascript 从数据库中填充数据。我在网上看了很多网站，提供了服务器端的示例，即用于创建下拉菜单的 JSP、ASP 或 PHP。我知道创建 HTML 下拉菜单和其他语言的简单语法。但我不知道如何从数据库中填充 HTML 下拉菜单值。任何从 JSP 页面获取数据并从数据库中获取数据并在选择单个项目时触发对再次从数据库中获取数据的 JSP 页面的查询的技术都可以为我工作。

问题：我想从 html 页面访问数据库字段。 html 页面的下拉列表应从数据库中填充，并在选择特定值时获取特定于该选项的数据。

任何想法或指向我应该查看的来源的链接。

Answer 1

这样您就可以大致了解该机制：由这样的事件侦听器触发的 Ajax 调用怎么样（也可以使用单击事件或其他）：

html-document加载完成后，给被监视的元素（这里是onchange）添加一个事件监听器，并在事件触发时调用一个函数：

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

Ajax 调用的功能： 在数据变量中，您可以将信息发送到服务器以决定发送回哪些选项。最简单的方法（虽然快速而肮脏）是返回（如 php 中的“echo”）纯文本/html 中的选项值并用它替换旧的选项元素。我更喜欢您问题评论中链接中描述的 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 方式并逐个元素添加，这使得以后的调试和工作变得更容易。