Jquery实现省市联动

兄弟，这个访问的时候可别再输入JSP路径了，得访问Servlet

1.查询省份：

JqProvinceServlet:

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

        try {
            response.setContentType("text/html;charset=UTF-8");
            request.setCharacterEncoding("UTF-8");
            JqProvinceCityService jqProvinceCityService = new JqProvinceCityService();
            List<Province> list = jqProvinceCityService.findProvince();
            request.setAttribute("list", list);
            request.getRequestDispatcher("/JQ_province_city/JQ_province_city.jsp").forward(request, response);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

JqProvinceCityService:

/**
     * 寻找省份
     * @return
     * @throws SQLException
     */
    public List<Province> findProvince() throws SQLException {
        JqProvinceCityDao jqProvinceCityDao = new JqProvinceCityDao();
        return jqProvinceCityDao.findProvince();
    }

JqProvinceCityDao:

/**
     * 寻找省份
     * @return
     * @throws SQLException
     */
    public List<Province> findProvince() throws SQLException {
        QueryRunner queryRunner = new QueryRunner(C3P0JDBCUtils.getDataSource());
        String sql = "select * from province";
        List<Province> list = queryRunner.query(sql, new BeanListHandler<Province>(Province.class));
        return list;
    }

---

2.根据省份id查询城市

导包

JqCityServlet:

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        try {
            response.setContentType("text/html;charset=UTF-8");
            request.setCharacterEncoding("UTF-8");
            //接收数据
            String pid = request.getParameter("pid");
            JqProvinceCityService jqProvinceCityService = new JqProvinceCityService();
            List<City> list = jqProvinceCityService.findCity(pid);
            //将list集合生成xml
            XStream xStream = new XStream();
            //修改标签名
            xStream.alias("city", City.class);
            /**city就是标签名
             * <list>
             *  <city>
             *      <cid>1</cid>
             *      <cname>哈尔滨</cname>
             *      <pid>4</pid>
             *  </city>
             * </list>
             */
            String XMLStr = xStream.toXML(list);

            response.getWriter().print(XMLStr);

            /* 将类中属性作为 标签的属性
            xStream.useAttributeFor(City.class, "cid");
            xStream.useAttributeFor(City.class,"cname");
            xStream.useAttributeFor(City.class,"pid");*/
            /**类中属性设为标签的属性后，格式变为
             * <list>
             *  <city cid="1" cname="哈尔滨" pid="4">
             * </list>
             */

        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

JqProvinceCityService:

/**
     * 根据pid查找城市
     * @param pid
     * @return
     * @throws SQLException 
     */
    public List<City> findCity(String pid) throws SQLException {
        JqProvinceCityDao jqProvinceCityDao = new JqProvinceCityDao();
        return jqProvinceCityDao.findCity(pid);
    }

JqProvinceCityDao:

/**
     * 寻找城市
     * @param pid
     * @return
     * @throws SQLException
     */
    public List<City> findCity(String pid) throws SQLException {
        QueryRunner queryRunner = new QueryRunner(C3P0JDBCUtils.getDataSource());
        String sql = "select * from city where pid = ?";
        List<City> list = queryRunner.query(sql, new BeanListHandler<City>(City.class), pid);
        return list;
    }

---

JQ_province_city.jsp:

<!-- 兄弟，一定要先导Jquery的包啊！再导自己写的script函数！顺序不能反了！ -->
<script type="text/javascript" src="${ pageContext.request.contextPath }/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/WebTest/JQ_province_city/JQ_province_city.js"></script>

<tr>
    <td>籍贯</td>
        <td>
            <select id="province" name="province" >
                <option>--请选择--</option>
                <c:forEach var="p" items="${ list }">
                    <option value="${ p.pid }">${ p.pname }</option>
                </c:forEach>
            </select>
            <select id="city" name="city">
                <option>--请选择--</option>
            </select>
        </td>
    </tr>

JQ_province_city.js:

$(function() {
    alert("111");
    //为省份下拉列表绑定事件
    $("#province").change(function() {
    alert("111");
        //获得省份id
        var pid = $(this).val();
        $.post("/WebTest/JqCityServlet",{"pid":pid},function(data) {
            var $city = $("#city");
            $city.html("<option>--请选择--</option>");
            //遍历，city为list中的标签名
            $(data).find("city").each(function() {
                var cid = $(this).children("cid").text();
                var cname = $(this).children("cname").text();
                //打印city名称, var $city = $("#city")
                $city.append("<option value='"+cid+"'>"+cname+"</option>");
            });
        });
    });
});