省市联动备忘

商城项目订单地址省市联动小结。

这种情况要求再jsp页面加载完成后省的数据就要从数据库中查询出来。

//当页面加载完成后，就需要把省显示出来
function loadProvince(){
    //获取xmlhttprequest
    var xhr = getXMLHttpRequest();


    //设置和服务器交互的状态改变对应的事件
    xhr.onreadystatechange = function(){


        if(xhr.readyState==4 && xhr.status == 200){


            //获取从后台加载到的省市数据,调用函数发送jsp页面显示
            addProvince(xhr.responseText);


        }
    };

    //打开和服务器之间的连接
    xhr.open("post","/estore/getProvinceServlet",true);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 


    //发送数据
    xhr.send("codeid=0");

    //alert("123");
}


//当页面加载完成后，就需要把省显示出来
 function addProvince(proInfo){


    //将后台传过来的json字符串解析成json对象,
    var json = eval("("+ proInfo+")");

    //获取省的selelct标签
    var proSelect = document.getElementById("province");


    //遍历对象，获取其中的省的id 和省的名称
    for( var index in json ){
        //获取到某个省的下标
        var code = json[index]['codeid'];
        var name = json[index]['cityName'];
        //创建省的select下的每个option标签对象
        //<option></option>
        var option = document.createElement("option");
        //设置的value和文本数据
        option.setAttribute("value",code);
        option.innerHTML = name;
        //将option添加到省的下拉框中
        proSelect.appendChild(option);
    }

 }

servlet

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

        // 1.获取页面提交的数据codeid
        String provinceCodeid = request.getParameter("codeid");

        // 2.根据codied从province数据库中查找出对应的城市
        ProvinceService provinceService = new ProvinceServiceImpl();
        List<CityInfo> list = provinceService
                .findProvinceByCodied(provinceCodeid);

        // 查到的城市信息放在一个list集合中，但是我们不可能把list集合返回给jsp，需要转换为json传给jsp

        JSONSerializer jsonSerializer = new JSONSerializer();
        String json = jsonSerializer.exclude("class").exclude("parentid")
                .serialize(list);
        System.out.println(json);

        response.setContentType("text/html;charset=utf-8");
        response.getWriter().print(json);

    }
}

dao

@Override
    public List<CityInfo> findProvinceByCodied(String provinceCodeid) {

        // 创建负责操作数据库的对象
        QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());

        // 查询语句,根据codeid查询写活了，查询省市，省的话就是parentid = 0
        String sql = "select * from province where parentid = ?";
        // 执行查询语句
        try {
            return queryRunner.query(sql, new BeanListHandler<CityInfo>(
                    CityInfo.class), provinceCodeid);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            throw new RuntimeException("根据id加载省失败");
        }

    }

function loadCity( obj ){
    //获取用户选择的省的id
    //获取到obj表示的select标签下的所有的option标签，并得到的是一个数组
    var ops = obj.options;
    var codeid = ops[obj.selectedIndex].value;
    //alert(obj.selectedIndex);
    //获取xmlhttprequest对象，和后台进行交互，获取到省的信息
    var xhr = getXMLHttpRequest();

    //设置和服务器交互的状态改变对应的事件
    xhr.onreadystatechange = function(){
        if( xhr.readyState == 4 && xhr.status == 200 ){
            //获取从后台加载到的省的信息
            addCity(xhr.responseText);
        }
    };
    //1、需要打开和服务器之间的连接
    xhr.open("post","/estore/getProvinceServlet",true);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    //2、发送请求
    xhr.send("codeid="+codeid);
}
function addCity( proInfo ){
    //需要将后台发来的字符串数据转成json对象 
    //使用js中的eval函数，将js中的字符串数据转成js代码
    var json = eval("("+proInfo+")");

    //获取省的select标签
    var proSelect = document.getElementById("city");
    //情况原来市下面的所有数据
    proSelect.length = 1;
    //遍历对象，获取其中的省的id 和省的名称
    for( var index in json ){
        //获取到某个省的下标
        var code = json[index]['codeid'];
        var name = json[index]['cityName'];
        //创建省的select下的每个option标签对象
        //<option></option>
        var option = document.createElement("option");
        //设置的value和文本数据
        option.setAttribute("value",code);
        option.innerHTML = name;
        //将option添加到省的下拉框中
        proSelect.appendChild(option);
    }


}