一、需求分析

先有一个省份的下拉选，根据选择省份，从而动态的市下拉选中加载所有的市。

步骤分析：
1、表（省表、市表）
2、页面上有两个下拉选（省份下拉选一般是固定的页面加载的时候读取所有的省份）
3、当省份改变的时候，要获取省份的信息，发送ajax请求到市的表中查询响应省份的所有市，然后将他们加载到市的下拉选中
4、要有两个servlet，一个是省的servlet，一个是市的servlet

整体思路就是在页面上显示省市下拉选，然后使用jquery在改变的情况下发送ajax请求到后台进行查询，然后使用ajax的回调函数进行展示。

二、代码

前台代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
    src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        //页面加载成功 查询所有的省
        $.get("/day15/selectPro",function(d){
            //alert(d)
            var $pro=$("#proId");
            $(d).each(function(){
                $pro.append($("<option value="+this.provinceid+">"+this.name+"</option>"));
            });
        },"json");
        
        
        //给省份下拉选派发change事件
        $("#proId").change(function(){
            //获取省份id
            var $pid=$(this).val();
            //alert($pid);
            //发送ajax请求 查询所有的市
            $.get("/day15/selectCity",{"pid":$pid},function(obj){
                //alert(obj);
                var $city=$("#cityId");
                $city.html("<option>-请选择-</option>");
                if(obj!=null){
                    $(obj).each(function(){
                        $city.append($("<option value='"+this.cityid+"'>"+this.name+"</option>"));
                    });
                }
            },"json");
        });
    })
</script>
<title>省市联动</title>
</head>
<body>
    <select id="proId" name="province">
        <option>-省份-</option>
        <!-- 
        <option value="1">北京</option>
         -->
    </select>
    <select id="cityId" name="city">
        <option>-请选择-</option>
    </select>
</body>
</html>

SelectProServlet代码：

package com.itheima.web.servlet;

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.itheima.domain.Province;
import com.itheima.service.ProvinceService;

import net.sf.json.JSONArray;

/**
 * 查询所有的省
 */
public class SelectProServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.调用service 查询所有的省份
        List<Province> list=null;
        try {
            list = new ProvinceService().findAll();
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        
        //2.将所有的省份写回去
        response.setContentType("text/html;charset=utf-8");
        if(list!=null && list.size()>0){
            response.getWriter().println(JSONArray.fromObject(list));
        }
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

SelectCityServlet代码：

package com.itheima.web.servlet;

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.itheima.domain.City;
import com.itheima.service.CityService;

import net.sf.json.JSONArray;

/**
 * 根据省份id查询所有的市
 */
public class SelectCityServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //0.设置编码
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        
        //1.获取省份id
        String pid=request.getParameter("pid");
        
        //2.调用service 查询所有的市 返回 list
        List<City> list=null;
        try {
            list = new CityService().findCitiesByPid(pid);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        
        //3.将list转换成json 返回页面
        if(list!=null && list.size()>0){
            response.getWriter().println(JSONArray.fromObject(list));
        }
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

九、省市联动

九、省市联动

一、需求分析

二、代码