json异步之二级菜单联动demo笔记

1.先导入3个jar包

作用是解析bean对象,使其转换为符合json格式的字符串,可以通过jackson关键字在aliyun的maven仓库找到这三个jar包

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.9.6</version>
</dependency>

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-core</artifactId>
    <version>2.9.6</version>
</dependency>

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-annotations</artifactId>
    <version>2.9.6</version>
</dependency>

还要导入一个spring-mvc的jar包

<!-- spring webmvc -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>4.3.9.RELEASE</version>
    </dependency>

2.编写jsp页面

<!-- 为了让界面好看一点点,用了fieldset这个标签 -->
<fieldset>
    <legend style="font-size: 50px;">二级联动菜单</legend>
    <!-- 
        此处在函数里面传个参数,用于获取省份的编号,this代表当前点击的这个省份,
        this.value代表点击的这个省份所对应的城市
     -->
    <select id="province" onchange="getCity(this.value)">
        <option>请选择...</option>
        <option value="1">山西</option>
        <option value="2">山东</option>
        <option value="3">河北</option>
    </select>
    <select id="city">
        <option>请选择...</option>
    </select>
</fieldset>

3.编写js代码,首先导入jQuery,就不演示怎么导入了

//使用jQuery获取城市信息
function getCity(provinceCode){
    //使用ajax函数发送异步请求
    $.ajax({
        //表示请求地址
        url:"${pageContext.request.contextPath}/getCity.do",
        //表示提交的数据,就是get请求url中 ? 后面的数据,多个数据的话,用 & 符连接
        data:"code="+provinceCode,
        //提交数据的方式
        type:"get",
        //响应数据的类型
        dataType:"json",
        //obj就是服务器响应的json对象
        success:function(obj){
            //初始化城市列表,使每次点击省份的时候,城市列表都会重置,以免重复添加数据
            $("#city").html("<option>选择城市</option>");
            //遍历json对象数组
            for(i=0;i<obj.data.length;i++){
                //新建option标签,将城市信息传进去,第一个参数为城市的名字,第二个参数为城市的编号
                var option = new Option(obj.data[i].cityName,obj.data[i].cityCode);
                //将城市信息添加到城市列表中
                $("#city").append(option);
            }
        }
    })
}

4.创建bean包,City类

//实现序列化接口
public class City implements Serializable{
    private static final long serialVersionUID = 7987395232363092063L;
    //城市编号
    private Integer cityCode;
    //城市名称
    private String cityName;
    //实现相对应的get 和 set 方法(太多了，就不写了，下面的也是)
    ......
    //覆盖tostring、hashcode、equals方法
    //写两个构造器，一个无参，一个有参
}

5.在bean包下写一个装json数据的类，类名随便起

//<T>范型代表json数据可以是任何数据类型
//同样实现序列化接口
public class ResponseResult<T> implements Serializable{
    private static final long serialVersionUID = -4394155310369805409L;
    //表示状态码
    private Integer state;
    //表示状态信息
    private String message;
    //json数据类型
    private T data;
    //覆盖相对于的get 和 set 方法(太多了，不写了)
    ......
    //覆盖tostring、hashcode、equals方法
    ......
    //写三个构造器，一个无参，一个参数为状态码和状态信息的有参构造，一个是参数列表为全部属性的有参构造
    ......
}

6.写控制器层

//显示updata页面
//这个注解表示请求这个地址的话则执行下面这个方法
@RequestMapping("/showUpdate.do")
public String showUpdate(){
    //返回一个和jsp页面名字相同的字符串
    return "update";
}

//添加city节点的内容
@RequestMapping("/getCity.do")
//这个注解表示返回的内容是响应的数据，而不是要响应页面
@ResponseBody
//城市信息用list类型装，当然也可以用别的
public ResponseResult<List<City>> getCity(Integer code){
    //创建json类型对象
    ResponseResult<List<City>> rr = new ResponseResult<List<City>>(1,"成功");
    List<City> list = new ArrayList<City>();
    //进行判断，因为我就写了三个城市，所以只用了三个分支
    if(code == 1){
        list.add(new City(11,"运城"));
        list.add(new City(12,"太原"));
        list.add(new City(13,"临汾"));
        ......
    }else if(code == 2){
        list.add(new City(21,"潍坊"));
        list.add(new City(22,"菏泽"));
        ......
    }else{
        list.add(new City(31,"秦皇岛"));
        list.add(new City(32,"廊坊"));
        list.add(new City(33,"石家庄"));
        ......
    }
    //装饰list装进json对象中
    rr.setData(list);
    //返回
    return rr;
}

至此这个用json实现的二级菜单联动的功能就实现了，由于我现在还是个学生，所以有的地方还不是很明白，而且还有一个BUG，就是当点击省份的‘选择省份’时，会报错，提示的是jQuery错，不知道是什么原因，如果有知道原因的大佬，可以留言沟通一下。