Ajax案例——省市县/区三级联动选择框

public class DruidUtil {
    //定义成员变量 DataSource ds
   private static DataSource dataSource;
    static {
        Properties pro = new Properties();
        InputStream is = null;
        try {
            is = DruidUtil.class.getClassLoader().getResourceAsStream("druid.properties");
            pro.load(is);
            dataSource= DruidDataSourceFactory.createDataSource(pro);
        } catch (IOException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            try {
                is.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
    //获取连接
    public static Connection getConnection(){
        Connection conn = null;
        try {
            conn = dataSource.getConnection();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return  conn;
    }
    //获取DataSource对象
    public static DataSource getDataSource(){
        return  dataSource;
    }

}

druid.properties配置文件

driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/数据库名称
username=root
password=你的数据库密码

# 初始化连接数量
initialSize=5
# 最大连接数
maxActive=10
# 最大等待时间
maxWait=3000

2、代码开发

2.1、实体类

实体类使用lombok工具，自动生成set/get方法

@Data
public class Province {
    private int codeid;
    private int parentid;
    private String cityName;
}

2.2、dao层代码

public interface ProvinceDao {
    //根据pid获取城市
    List<Province> getCity(int pid);
}

public class ProvinceDaoImpl implements ProvinceDao {
    private JdbcTemplate jdbcTemplate=new JdbcTemplate(DruidUtil.getDataSource());
    @Override
    public List<Province> getCity(int pid) {
        try {
            String sql="select * from province where parentid=?";
            return jdbcTemplate.query(sql,new BeanPropertyRowMapper<>(Province.class),pid);
        } catch (DataAccessException e) {
            return null;
        }
    }
}

2.3、service层代码

public interface ProvinceService {
    //根据pid获取城市
    List<Province> getCity(int pid);
}

public class ProvinceServiceImpl implements ProvinceService {
    private ProvinceDao provinceDao=new ProvinceDaoImpl();
    @Override
    public List<Province> getCity(int pid) {
       return provinceDao.getCity(pid);
    }

}

2.4、web层代码

@WebServlet(urlPatterns = "/GetCityServlet")
public class GetCityServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("application/json;charset=utf-8");
        //获取页面传递过来的pid
        String pid = request.getParameter("pid");
        //调用service对象
        ProvinceService provinceService=new ProvinceServiceImpl();
        //调用getCity()方法传递pid至dao层
        List<Province> list= provinceService.getCity(Integer.parseInt(pid));
        //创建json核心对象
        ObjectMapper objectMapper=new ObjectMapper();
        //序列化dao层查询到的list集合
        String value = objectMapper.writeValueAsString(list);
        //返回至页面
        response.getWriter().println(value);

    }
}

2.5、html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="s1">
    <option value="">---请选择省---</option>
</select>
<select id="s2">
    <option value="">---请选择市---</option>
</select>
<select id="s3">
    <option value="">---请选择县---</option>
</select>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
     
    //刚进入页面首先加载所有省
    loadArea(0, "s1");
    //市
    $("#s1").change(function () {
        //先清空先前的内容
        $("#s2").empty();
        //加上提示语
        $("#s2").append("<option value=\"\">---请选择市---</option>");

        //清空区县里面的内容
        $("#s3").empty();
        $("#s3").append("<option value=\"\">---请选择区县---</option>");

       var pid= $(this).val();
       loadArea(pid, "s2");
    });
    //区县
    $("#s2").change(function () {
        $("#s3").empty();
        $("#s3").append("<option value=\"\">---请选择区县---</option>");
        var pid= $(this).val();
        loadArea(pid, "s3");
    });
    function loadArea(pid, sid) {
        $.get("GetCityServlet", {pid: pid}, function (data) {
            $(data).each(function () {
                var cityName = this.cityName;
                var codeid = this.codeid;
                var option = $("<option value='" + codeid + "'>" + cityName + "</option>");
                $("#"+sid).append(option);
            });
        });
    }

</script>
</html>

Ajax案例——省市县/区三级联动选择框

1、案例环境搭建

1.1、jar包资源导入

1.2、数据库准备

2、代码开发

2.1、实体类

2.2、dao层代码

2.3、service层代码

2.4、web层代码

2.5、html页面

3、效果展示

猜你喜欢