繁体   English   中英

如何获取 java 列表并在 jsp 页面中构建下拉列表

[英]How to get java list and built a drop down list in jsp page

我有一个 jsp 页面。 如果用户输入某个文本,则会发送 ajax 请求并检索列表。Bow 我想从列表 object 中构建一个下拉列表,并将默认值设置为列表 Z4970317944114A5524BZ5B66Z 的第一个元素。 我怎么能做到这一点。

You need to encode the list on the Java side (as JSON, maybe, or using some custom separators) and then use JavaScript in your onSuccess callback to add options to your select box based on the encoded values.

我没有任何 AJAX 知识,所以我对此无能为力。 所以我解决这个问题的方法是在 java/jsp 中尽我所能,然后使用 javascript/AJAX 从辅助 jsp 中获取 select,如下所示:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<select>
    <c:set var="seenFirst" value="0" />
    <c:forEach var="obj" items="${sessionScope.list}">
        <c:choose>
            <c:when test="${seenFirst == 0}">
                <c:set var="seenFirst" value="1" />
                <option value="${obj}" selected>${obj}</option>         
            </c:when>

            <c:otherwise>
                <option value="${obj}">${obj}</option>
            </c:otherwise>
        </c:choose>
    </c:forEach>
</select>

编辑:实际上,首先使用<c:forEach>使用辅助变量来计算选项(在 id 字段中),然后使用 javacript 将所选属性打开到第一个,实际上会更干净。 像这样:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<select>
    <c:set var="n" value="0" />
    <c:forEach var="obj" items="${sessionScope.list}">
        <option id="menu-${n}" value="${obj}">${obj}</option>
        <c:set var="n" value="${n + 1}" />
    </c:forEach>
</select>

你可以使用这样的东西来 select 第一个元素:

var first = document.getElementById('menu-0');
first.selected = true;

I recommend to use a servlet to handle the ajax request, to use JSON as data transfer format and to use jQuery to do the real ajax request and to traverse and manipulate the HTML DOM tree. 您可以在 如何使用 Servlets 和 Ajax 中找到很多示例? 您的特殊情况可以解决如下:

JSP:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 6250627</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#search').keyup(function() {
                    $.get('search', $(this).serialize(), function(responseText) {
                        var $select = $('#results');
                        $select.find('option').remove();
                        $.each(responseJson, function(key, value) {
                        $('<option>').val(key).text(value).appendTo($select);
                    });
                });
            });
        </script>
    </head>
    <body>
        <form><input id="search" /></form>
        <select id="results"></select>
    </body>
</html>

Servlet(使用Google Gson将 Java 对象转换为 JSON 字符串):

@WebServlet(urlPatterns={"/search"})
public class SearchServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Map<String, String> results = someService.find(request.getParameter("search"));
        String json = new Gson().toJson(results);

        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(json);
    }

}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM