【JS】【基于JSON、JQuery的省级联动】

简介

• 使用fastjson.jar来转换json对象的字符串
• html中节点不写事件,全部由js处理
• 思路:html两个select,分别为province和city
  
  • 当页面加载完,完成province的内容加载
  • 当province的选项改变(事件),city跟着改变(函数).

html代码

    <select id="province" >
    </select>
    <select id="city" >
    </select>

action的代码

//向ajax输出
    public void print(String str) throws Exception {
        ServletActionContext.getResponse().setContentType("text/json;charset=utf-8");
        ServletActionContext.getResponse().getWriter().print(str);
    }

//传出province的json数组的字符串
    public void getProvinceList() throws Exception {
    //此处的provinces应该是从数据查询的结果
        List<Province> provinces = Province.getAllProvince();
        this.print(JSON.toJSONString(provinces));
    }

//根据省份的id,返回对应城市的json数组的字符串
    private Long pid;//省份id
    public void setPid(Long pid) {
        this.pid = pid;
    }

    //传出city的json数组字符串
    public void getCityList() throws Exception {
    //citys应该通过id查询数据库返回的结果
        List<City> citys = City.getCityByProvinceId(pid);
        this.print(JSON.toJSONString(citys));
    }

js的代码

//加载province 不需要传递参数
$(function(){
    $.get(
            "MyAjax/ajax_getProvinceList",
            function(data){
                var str="<option>请选择</option>"
                //循环添加<option id=XX>省名</option>
                for(var i in data){
                   str+="<option id="+data[i].id+">"+data[i].name+"</option>"
                }
                $("#province").html(str);
            },
            'json'
            )
})

//给$("#province")添加改变事件  需要传递参数pid(选中省份的id)
$(function(){
    //声明改变事件的函数
    var provinceChange=function(){
        $.get(
                "MyAjax/ajax_getCityList",
                {pid:$("#province option:selected").attr('id')},
                function(data){
                    var str="<option>请选择</option>"
                    //循环添加<option id=XX>省名</option>
                    for(var i in data){
                       str+="<option id="+data[i].id+">"+data[i].name+"</option>"
                    }
                    $("#city").html(str);
                },
                'json'
                )
    }
    //给节点注入该事件
    $("#province").change(provinceChange);
})