单击按钮时，JSP从数据库填充下拉列表

小编典典

单击按钮时，JSP从数据库填充下拉列表

jsp

这是我的代码

 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
 <%@page contentType="text/html" pageEncoding="UTF-8"%>
 <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <title>JSP Page</title>
            </head>
            <body>
                 <sql:setDataSource var="db"
                                   driver="com.mysql.jdbc.Driver"
                                   url="jdbc:mysql://localhost/dbase"
                                   user="root"
                                   password="1asulxayev" />
                <sql:query var="select" dataSource="${db}">
                    select * from dtable
                </sql:query>
                   <select name="lst">
                    <c:forEach var="result" items="${select.rows}"> 
                      <option>${result.name}</option>
                   </c:forEach>
                 </select>    
              <input type="submit" value="Fill" name="btn">
                 </body>
        </html>

这次是页面加载下拉列表填充时。但是我想当按钮单击填充下拉列表时

阅读 224

2020-06-10

共1个答案

小编典典

这是使用AJAX的示例代码。有关更多信息，请阅读内联注释。

Servlet：

在doGet()方法中从数据库中获取数据，然后简单地将逗号分隔的字符串写入HTTP响应，并将其刷新到客户端。

HTML：

<head>
<script type="text/javascript">
    $(document).ready(
            function() { // When the HTML DOM is ready loading, then execute the following function...
                $('.btn-click').click(
                        function() { // Locate HTML DOM element with ID "somebutton" and assign the following function to its "click" event...
                            $.get('myServletURL', function(responseJson) { // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response JSON...
                                //alert(responseJson);
                                var $select = $('#maindiv'); // Locate HTML DOM element with ID "someselect".
                                $select.find('option').remove(); // Find all child elements with tag name "option" and remove them (just to prevent duplicate options when button is pressed again).
                                var items = responseJson.split(',');

                                for ( var i = 0; i < items.length; i++) {
                                    $('<option>').val(items[i]).text(items[i])
                                            .appendTo($select); // Create HTML <option> element, set its value with currently iterated key and its text content with currently iterated item and finally append it to the <select>.
                                }
                            });
                        });
            });
</script>

</head>
<body>
    <select id="maindiv" style="width: 300px;"></select>
    <input type="button" class="btn-click" id="best" value="check" />
</body>

2020-06-10