javawebday63(数据库json省市联动)

最新推荐文章于 2021-12-18 13:16:36 发布

wenchi2018

最新推荐文章于 2021-12-18 13:16:36 发布

阅读量280

点赞数

分类专栏： javaweb

javaweb 专栏收录该内容

80 篇文章 0 订阅

订阅专栏

1、dao：提供两个方法，
    一个是查询所有省
    通过省名称查询指定的市

2、servlet：两个方法
    一个把所有省转换成json，发送给客户端
    通过获取省名称这个参数，然后查询该省下的所有市，转换成json，发送给客户端

3、ajax5.jsp
    页面加载完成后：访问servlet，得到所有省，然后显示在<select id ="province">
    页面加载完成后：给<select id="province">添加onchange事件监听，获取选择的省名称，访问servlet，得到所有市，显示在<select id="city">中

一行记录对应多个对象时，需要使用Map来生成多个对象

这里写图片描述

my.domain.Province

public class Province {
    private int pid;
    private String name;
    private List<City> cityList;//一方关联多方

my.domain.City

public class City {
    private int cid;
    private String name;
    private Province province;//多方关联一方

my.dao

public class Dao {
    private QueryRunner qr = new TxQueryRunner();
    /**
     * 查询所有省
     * @return
     */
    public List<Province> findAllProvince(){
        try {
            String sql = "select * from t_province";
            return qr.query(sql, new BeanListHandler<Province>(Province.class));
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }

    }

    /**
     * 查询指定省下的所有市
     */
    public List<City> findByProvince(int pid){
        try{
            String sql ="select * from t_city where pid=?";
            return qr.query(sql, new BeanListHandler<City>(City.class),pid);
//          List<Map<String,Object>> mapList = qr.query(sql, new MapListHandler(),pid);
//          Map<String,Object> map = mapList.get(0);
//          City city = CommonUtils.toBean(map, City.class);//把map转换成city对象
//          Province province = CommonUtils.toBean(map, Province.class);//
//          System.out.println(province);
//          System.out.println(city);
//          return qr.query(sql, new BeanListHandler<City>(City.class),pid);
//          city.setProvince(province);
        } catch(SQLException e){
            throw new RuntimeException(e);
        }
    }
    public static void main(String[] args) {
//      Dao dao = new Dao();
//      dao.findByProvince(1);
    }
}

public class ProvinceServlet2 extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        /*
         * 1、通过dao得到所有的省
         * 2、把List<Province>转换成json
         * 3、发送给客户端
         */
        Dao dao = new Dao();
        List<Province> proList = dao.findAllProvince();
        String json = JSONArray.fromObject(proList).toString();
        response.getWriter().print(json);
    }

}

public class CityServlet2 extends HttpServlet {

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

        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");//发送xml时这里要修改
        /*
         * 1、获取名为pid的参数
         * 2、使用这个省id查询数据库，得到List<City>
         * 3、转发成json，转发给客户端
         */
        int pid = Integer.parseInt(request.getParameter("pid"));
        Dao  dao = new Dao();
        List<City> cityList = dao.findByProvince(pid);
        String json = JSONArray.fromObject(cityList).toString();
        response.getWriter().print(json);
    }

}

ajax5.jsp

<script type="text/javascript">
/*
 * 1、在文档加载完成后
    获取所有省，添加到<select id="province">中
    给<select id="province">这个元素添加onchange事件
   事件内容
    1、获取当前选择的省id
    2、使用省id访问servlet，得到该省下所有市
    3、把每个市添加到<select id="city">中
 */
 function createXMLHttpRequest(){
        try{
            return new XMLHttpRequest();
        }catch(e){
            try{
                return new ActiveXObject("Msxm12.XMLHTTP");
            } catch(e){
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
}
 window.onload = function(){
        /*
            发送异步请求，得到所有省，然后使用每个省生成一个<option>元素添加到<select id ="province">中
        */
        //得到核心对象
        var xmlHttp = createXMLHttpRequest();
        //打开连接 在浏览器客户端执行，执行时已经改变
        xmlHttp.open("GET","<c:url value='/ProvinceServlet2'/>",true);
        //发送
        xmlHttp.send(null);
        //添加监听
        xmlHttp.onreadystatechange = function(){
            if(xmlHttp.readyState == 4 ){
                if(xmlHttp.status ==200){
                    //执行服务器发送过来的json字符串，得到js的对象
                    var proArray =  eval("("+xmlHttp.responseText+")");
                    for(var i =0; i<proArray.length;i++){
                        var pro  = proArray[i];//得到每个pro对象

                        //创建<option>元素
                        var optionEle = document.createElement("option");
                        //给<option>元素的value属性赋值
                        optionEle.value = pro.pid;//给<option>的实际值赋为pid,而不是name
                        var textNode = document.createTextNode(pro.name);//使用省名称来创建textNode
                        optionEle.appendChild(textNode);//把textNode添加到option元素中
                        //把option元素添加到select元素中
                        document.getElementById("province").appendChild(optionEle);
                    }
                }
            }   
        };
        /*
        2、给<select id="province">添加change监听
        */
        document.getElementById("province").onchange = function(){
            /*
            异步请求服务器，得到选择的省下城市
            */
            var xmlHttp = createXMLHttpRequest();
            //打开连接 在浏览器客户端执行，执行时已经改变
            xmlHttp.open("POST","<c:url value='/CityServlet2'/>",true);
            //设置请求头
            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            //发送
            xmlHttp.send("pid="+this.value);//用户选择的省
            //添加监听
            xmlHttp.onreadystatechange = function(){
                if(xmlHttp.readyState == 4 ){
                    if(xmlHttp.status ==200){
                        /*
                        0、先要清空原来的<option>元素
                        1、得到服务器发送过来的所有市
                        2、使用每个市生成<option>元素添加到<select id="city">中
                        */
                        /*
                        清空<select id="city">中的选项
                        */
                        var citySelect = document.getElementById("city");
                        //获取select中的所有元素
                        var cityOptionArray = citySelect.getElementsByTagName("option");
                        while(cityOptionArray.length>1){//这里只控制循环的次数
                            citySelect.removeChild(cityOptionArray[1]);//只删除1下标，不会删除0
                        }
                        /*
                        得到服务器发送过来的所有市
                        */
                        var cityArray = eval("("+xmlHttp.responseText+")");
                        //循环变量每个city对象，用来生成<option>元素添加到<select id="city">中
                        for(var i=0; i<cityArray.length;i++){
                            var city  = cityArray[i];//得到每个city对象

                            //创建<option>元素
                            var optionEle = document.createElement("option");
                            //给<option>元素的value属性赋值
                            optionEle.value = city.pid;//给<option>的实际值赋为pid,而不是name
                            var textNode = document.createTextNode(city.name);//使用城市名称来创建textNode
                            optionEle.appendChild(textNode);//把textNode添加到option元素中
                            //把option元素添加到select元素中
                            citySelect.appendChild(optionEle);
                        }
                    }
                }
            }
        }
 }

</script>
  </head>

  <body>
    <select name="province" id="province">
        <option>选择省份</option>
    </select>
    <select name="city" id="city">
        <option>选择城市</option>
    </select>
  </body>