从另一个列表中选择值时从数据库加载列表

Question

我的网页上有2个下拉列表。“国家列表”和“省列表”。 加载页面时，将从数据库中填充我的国家列表，然后在从列表中选择一个国家时，也应从数据库中填充该国家的省列表。

（我正在使用休眠反向工程来创建数据库连接文件和Bean类等）

我正在做的是在填充国家/地区列表之后，我使用jquery脚本获取所选国家/地区的值，然后使用ajax通过URL将其传递给控制器类。 我将在下面附上。

我面临的问题是，当我从国家列表中选择一个国家时，而不是填充省列表，而是再次打印了两个下拉框，而省列表框仍然为空。

这是我的jsp文件

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Selection Page</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>

</head>
<body>
    <form name="locationSelection" method="POST">

    Select Country:
        <br>
        <select name="countryList" id="countryList">
            <option value="">Select Country</option>
            <c:if test="${!empty countryList}">
                <c:forEach items="${countryList}" var="cont">
                    <option   value=${cont.countryId}>${cont.countryName}</option>
                </c:forEach>
            </c:if>
        </select>
        <br><br>

        <script>
        $(document).ready(function() 
        {
            $("#countryList").change(function() 
            {
                var selectedValue = $(this).find(":selected").val();
                $.ajax
                ({
                    url : "a.html?cID="+selectedValue+'',
                    success : function(result) 
                    {
                        $("#prvContatiner").html(result);
                    }
                });
            });
        });
        </script>

        Select Province:
        <div id="prvContatiner">
            <select name="provinceList" id="provinceList">
                <option value="">Select Province</option>
                      <c:if test="${!empty provinceList}">
                <c:forEach items="${provinceList}" var="cont">
                    <option   value=${cont.provinceId}>${cont.provinceDesc}</option>
                </c:forEach>
            </c:if>
        </select> 
            </select>
        </div>

    </form>
</body>

这是我的控制器Java类

package controller;

import java.io.IOException;
import java.util.List;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import dao.TblCountryDAO;
import dao.TblProvinceDAO;

@SuppressWarnings("serial")
public class SelectionController extends HttpServlet {
    void ProcessorRequest(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {

        String operation = request.getParameter("op");
        System.out.println("Operation: "+operation);
        String cID = request.getParameter("cId");
        if (cID == null) 
        {
            System.out.println(request.getRequestURI());
            TblCountryDAO dao = new TblCountryDAO();
            List<?> countryList = dao.findAll();
            request.setAttribute("countryList", countryList);
            RequestDispatcher reqDispatcher = request.getRequestDispatcher("main.jsp");
            reqDispatcher.forward(request, response);
        }
        else 
        {
            System.out.println("in elseif");

            TblProvinceDAO dao = new TblProvinceDAO();
            List<?> provinceList = dao.findByProperty("tblCountry.countryId", Integer.parseInt(cID));
            request.setAttribute("provinceList", provinceList);
            RequestDispatcher reqDispatcher = request.getRequestDispatcher("main.jsp");
            reqDispatcher.forward(request, response);
        }
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
    throws ServletException, IOException {
        ProcessorRequest(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
    throws ServletException, IOException {
        ProcessorRequest(req, resp);
    }
}

我附上web.xml文件以防万一

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    <display-name></display-name>
    <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>controller.SelectionController</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>/a.html</url-pattern>
    </servlet-mapping>

    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

任何其他完成任务的建议也将不胜感激

Answer 1

您正在寻找错误的参数request.getParameter("cId"); 应该是request.getParameter("cID"); 使用cId将返回null值，并且您将获得main.jsp作为响应

Answer 2

我认为您可以借助json切换到另一种方法来完成相同的任务

在控制器中，您将获得省列表。 使用任何Json库（例如google gson或json.org）并将其转换为对象的json数组，如下所示

[{
"id":1,
"name":"Delhi"
},{
...
...
},
...
]

并使用PrintWriter直接打印json数组。

然后在ajax成功响应中生成如下所示的选项-

$.ajax
                ({
                    url : "a.html?cID="+selectedValue+'',
                    success : function(result) 
                    {
                        $("#provinceList").html('');
                        for(var i=0;i<result.size;i++){
                            var option = '<option value="'+result[i].id+'">'+result[i].name+'</option>'
                            $("#provinceList").append(option);
                        }
                    }
                });

从另一个列表中选择值时从数据库加载列表

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-02-20 07:02:16

解决方案2
0 2014-02-20 08:02:58

从另一个列表中选择值时从数据库加载列表

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-02-20 07:02:16

解决方案2 0 2014-02-20 08:02:58

解决方案1
1 已采纳 2014-02-20 07:02:16

解决方案2
0 2014-02-20 08:02:58