Question

我正在尝试使用ajax和servlet填充城市，国家和州名单。现在我知道如何获取XMLhttpRequest对象。有一种标准机制可以做到这一点，并且根据跨浏览器的兼容性，您可以获得ActiveX或xml对象..

然后使用xmlhttprequest.open()向 actionservlet 发送请求并发送请求，并且您有一个事件处理函数来处理onreadystatechange问题，现在，当涉及到收到回复后，我收到一条错误，指出没有完全收到回复，即状态!= 4 ......现在。

我想知道，整个机制如何运作..

如何将参数放入请求中，将其发送到servlet，然后我知道如何从URL中重新获取param ...但是如何发送有效的响应...... ??

我对ajax部分感到困惑，因为我没有使用/不使用PHP。思考起来比较困难。请建议应该做些什么。

是否有更简单的方法来填充城市，国家和州名单？

Answer 1

让servlet根据doGet()方法中的请求参数以所需格式返回所需的下拉选项。这是一个在Google Gson的帮助下以JSON格式返回的示例：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String type = request.getParameter("type"); // Returns "country" or "state".
    String value = request.getParameter("value"); // Value of selected country or state.
    Map<String, String> options = optionDAO.find(type, id); // Do your thing to obtain them from DB. Map key is option value and map value is option label.
    String json = new Gson().toJson(options); // Convert Java object to JSON string.

    response.setContentType("application/json"); // Inform client that you're returning JSON.
    response.setCharacterEncoding("UTF-8"); // Important if you want world domination.
    response.getWriter().write(json); // Write JSON string to response.
}

假设上面的servlet映射到url-pattern /options，您可以在jQuery的帮助下使用它，如下面的JSP示例所示。我推荐使用jQuery，因为否则这个“简单”任务需要10倍的JavaScript代码。

<%@ page pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3983929</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#country').change(function() { fillOptions('state'); });
                $('#state').change(function() { fillOptions('city'); });
            });
            function fillOptions(dropdownId) {
                var dropdown = $('#' + dropdownId);
                $.getJSON('options?type=' + dropdownId + '&value=' + $(this).val(), function(opts) {
                    $('>option', dropdown).remove(); // Clean old options first.
                    if (opts) {
                        $.each(opts, function(key, value) {
                            dropdown.append($('<option/>').val(key).text(value));
                        });
                    } else {
                        dropdown.append($('<option/>').text('Please select ' + dropdownId));
                    }
                });
            }
        </script>
    </head>
    <body>
        <form>
            <select id="country" name="country">
                <c:forEach items="${countries}" var="country">
                    <option value="${country.key}" ${param.country == option.key ? 'selected' : ''}>${country.value}</option>
                </c:forEach>
            </select>
            <select id="state" name="state">
                <option>Please select country</option>
            </select>
            <select id="city" name="city">
                <option>Please select state</option>
            </select>
        </form>
    </body>
</html>

这里我假设您已经预先将${countries}预先填充为servlet中的Map<String, String>，该servlet已预先处理了对此JSP的请求以进行初始显示。

ajax + servlet国家城市列表

1 个答案: