Question

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

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

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

Answer 1

这样你就可以对机制有一个大概的了解：像这样的事件监听器触发的Ajax调用怎么样（也可以使用click事件或其他）：

加载html文档后，向监视元素添加一个事件监听器（此处为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方式并逐个元素添加，这样可以在以后更轻松地进行dbugging和东西。

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

1 个答案: