链接选择与servlets,jquery,ajax,json

时间:2014-01-10 12:02:18

标签: java jquery ajax jsp servlets

有人可以在这里提供帮助。我有下面的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> 

2 个答案:

答案 0 :(得分: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}函数中。

答案 1 :(得分:0)

在ajax部分,我将其改为

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

                }, '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;

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

    connection = DBConnection.getConnection();

    RequestDispatcher dispatcher = request
            .getRequestDispatcher("jsp/pages/create.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(
                            Integer.valueOf(parentCategory), connection));
        }
        dispatcher = request.getRequestDispatcher("jsp/pages/create.jsp");
    } else {
        request.setAttribute(
                "CATEGORY",
                CategoryService.listAllCategory(
                        Integer.valueOf(parentCategory), connection));

    }
    dispatcher.include(request, response);

    DBConnection.closeConnection(connection);
}

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

    int parentCategory = Integer.parseInt(request.getParameter("parentCategory"));

    LOGGER.info("parentCategory id : " + parentCategory);

        connection = DBConnection.getConnection();

        Map<String, List<Category>> resp = new HashMap<String, List<Category>>();

        List<Category> categorySelectorList = CategoryService
                .listAllCategory(parentCategory,
                        connection);

        resp.put("categorySelectorList", categorySelectorList);

        response.setContentType("application/json");

        try {
            Gson gson = new Gson();
            String s = gson.toJson(resp);
            response.getWriter().write(s);

            LOGGER.info("TESTING mmmm : " + s);

        } catch (Exception e) {

            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="selectError2">Select
                                Category</label>
                            <div class="controls">
                                <select id="parentCategorySelector" name="parentCategorySelector"
                                    data-rel="chosen">
                                    <option value="">--Select Category--</option>
                                    <c:forEach items="${PARENTCATEGORY}" var="parentcategory">
                                        <option value="${parentcategory.id}">
                                            <c:out value="${parentcategory.name}" />
                                        </option>
                                    </c:forEach>

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

                        <div class="control-group">
                            <label class="control-label" for="selectError2">Select
                                type</label>
                            <div class="controls">
                                <select id="categorySelector" name="categorySelector"
                                    data-rel="chosen">                                      

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

以上工作正常。

谢谢大家。