java - 使用 servlet、jquery、ajax、json 进行链式选择

Question

有人可以帮忙吗？我有下面的 servlet 类，每次我尝试从父类别中选择时，子类别中都不会显示任何内容。如果我做错了什么，请看看下面的内容。

谢谢

ajax部分:

    $('#parentCategorySelector').change(function () {
            var selectedValue = $(this).prop('value');
            if (selectedValue == '--Select a parent category--') {
                $('#categorySelector').empty();
            } else {
                $.post('${PREFIX}/category', selectedValue, function(data) {
                    var categorySelectorList = data.categorySelectorList;
                    $('#categorySelector').empty();
                    $.each(categorySelectorList, function(key, value) {
                        $('#categorySelector').append($('<option/>', {
                            value : value,
                            text : value
                        }));
                    });
                }, 'json');
            }
        });

servlet 类:

  public class CategoryServlet extends HttpServlet {

/**
 * serialization
 */
private static final long serialVersionUID = -2461387206258395143L;

private static final Logger LOGGER = Logger
        .getLogger(CategoryServlet.class);

private Connection connection = null;
int cat = 0;

public void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {

    connection = DBConnection.getConnection();

    RequestDispatcher dispatcher = request
            .getRequestDispatcher("pages/all.jsp");
    dispatcher.include(request, response);

    String id = request.getParameter("id");
    String category = request.getParameter("category");
    String parentCategory = request.getParameter("parentCategory");

    if (StringUtils.paramSet(id)) {

        request.setAttribute("CATEGORY", CategoryService.getCategoryById(
                Long.valueOf(id), connection));

    } else if (StringUtils.paramSet(parentCategory)) {

        request.setAttribute(
                "CATEGORY",
                CategoryService.getParentCategory(
                        Integer.valueOf(parentCategory), connection));

    } else if (StringUtils.paramSet(category)) {
        String categories = request.getParameter("category");
        if (StringUtils.paramSet(categories)) {
            request.setAttribute("CATEGORY",
                    CategoryService.listAllCategory(cat, connection));
        }
        dispatcher = request.getRequestDispatcher("jsp/pages/all.jsp");
    } else {
        request.setAttribute("CATEGORY",
                CategoryService.listAllCategory(cat, connection));

    }
    dispatcher.include(request, response);

    DBConnection.closeConnection(connection);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {

    String action = request.getParameter("action");

    LOGGER.info("TESTING " + action);

    if (StringUtils.paramSet(action)) {
        connection = DBConnection.getConnection();
        Map<String, Object> resp = new HashMap<String, Object>();
        // resp.put("error", "Please fill in all fields");
         List<Category> categorySelectorList =
         CategoryService.listAllCategory(cat,connection);

         LOGGER.info("TESTING " + categorySelectorList);
        // resp.put("categorySelectorList", categorySelectorList);

        // LOGGER.info("TESTING 2 " + categorySelectorList);

        try {
            ResponseUtils.writeJson(resp, response);
        } catch (Exception e) {
            response.setContentType("application/json");
            response.getWriter()
                    .write("{\"error\" : \"An error occured please try again. If the error persists, please refresh your browser \"}");
        }
        DBConnection.closeConnection(connection);
    }
}

}

在jsp中看起来是这样的:

    <div class="control-group">
                            <label class="control-label" for="selectError">Select
                                Category</label>
                            <div class="controls">
                                <select id="parentCategorySelector" name="parentCategorySelector"
                                    data-rel="chosen">
                                    <c:forEach items="${PARENTCATEGORY}" var="parentcategory">
                                        <option value="${parentcategory.name}">
                                            <c:out value="${parentcategory.name}" />
                                        </option>
                                    </c:forEach>

                                </select>
                            </div>
                        </div> 
                        <div class="control-group">
                            <label class="control-label" for="selectError">Select
                                type</label>
                            <div class="controls">
                                <select id="categorySelector" name="categorySelector"
                                    data-rel="chosen">
                                    <c:forEach items="${CATEGORY}" var="subcategory">
                                        <option value="${subcategory.category}">
                                            <c:out value="${subcategory.category}" />
                                        </option>
                                    </c:forEach>

                                </select>
                            </div>
                        </div> 

Answer 1

尝试改变这个:

var selectedValue = $(this).prop('value');

对此:

var selectedValue = this.value;  //<---using navtive js code is better

和:

更改此:

$.post('${PREFIX}/category', selectedValue, function(data) {

对此:

$.post('${PREFIX}/category', {parentCategory:selectedValue}, function(data) {

由于您在请求参数中使用 'parentCategory'，因此您必须按照建议将其传递到 $.post 函数中({ ParentCategory:selectedValue})。