Ajax之三级联动

最新推荐文章于 2021-12-31 16:58:27 发布

塔夫先生

最新推荐文章于 2021-12-31 16:58:27 发布

阅读量657

点赞数 2

分类专栏： Ajax Java Web

本文链接：https://blog.csdn.net/Programer0/article/details/104574247

版权

Java Web 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Ajax

5 篇文章 0 订阅

订阅专栏

Ajax练习：利用Ajax实现省、市、县三级联动显示，实现代码如下：

HTML代码

<body onload="demo()">
    省:
    <select id="pro" onchange="demo1(this.value)">
        <option>--请选择--</option>
    </select>
    市:
    <select id="city" onchange="demo2(this.value)">
        <option>--请选择--</option>
    </select>
    县:
    <select id="country">
        <option>--请选择--</option>
    </select>
</body>

JS代码

<script type="text/javascript">
    function demo() {
        $.ajax({
            type:"get",
            url:"ajax2",
            data:"id=0",
            dataType:"json",
            success:function (data) {
                $("#pro").html("<option>--请重新选择--</option>");
                for(var i in data){
                    $("#pro").append("<option value='"+data[i].areaid+"'>"+data[i].areaname+"</option>")
                }
            }
        })
    }
        function demo1(val) {
            $.ajax({
                type: "get",
                url: "ajax2",
                data: "id=" + val,
                dataType: "json",
                success: function (data) {
                    $("#city").html("<option>--请重新选择--</option>");
                    for (var i in data) {
                        $("#city").append("<option value='" + data[i].areaid + "'>" + data[i].areaname + "</option>")
                    }
                }
            })
        }
            function demo2(val) {
                $.ajax({
                    type: "get",
                    url: "ajax2",
                    data: "id=" + val,
                    dataType: "json",
                    success: function (data) {
                        $("#country").html("<option>--请重新选择--</option>");
                        for (var i in data) {
                            $("#country").append("<option value='" + data[i].areaid + "'>" + data[i].areaname + "</option>")
                        }
                    }
                })

            }
</script>

Servlet代码

@WebServlet("/ajax2")
public class AjaxServlet2 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       //设置响应编码格式
        resp.setContentType("text/html;charset=utf-8");
        //接收页面数据
        int pid = Integer.parseInt(req.getParameter("id"));
        //处理数据
        AreaService as = new AreaServiceImpl();
        ArrayList<Area> list = as.findMore(pid);
        //做出响应
        Gson gson = new Gson();
        String json = gson.toJson(list);
        resp.getWriter().print(json);
    }
}

Service层代码

public class AreaServiceImpl implements AreaService{
    @Override
    public ArrayList<Area> findMore(int pid) {
        AreaDao ad = new AreaDaoImpl();
        List<Area> list = ad.queryMore(pid);
        return (ArrayList<Area>) list;
    }
}

Dao层代码

public class AreaDaoImpl implements AreaDao {
    @Override
    public List<Area> queryMore(int pid) {
        //编写sql语句(原生sql)
        String sql ="select * from area where parentid=?";
        Object [] obj ={pid};
        ResultSet rs = DBUtil.executeQuery(sql, obj);
        ArrayList<Area> list = new ArrayList<>();
        try {
            while (rs.next()){
                int areaid = rs.getInt("areaid");
                int parentid = rs.getInt("parentid");
                String areaname = rs.getString("areaname");
                //第一种方式
             /*   Area area = new Area();
                area.setAreaid(areaid);
                area.setParentid(parentid);
                area.setAreaname(areaname);*/
             Area area = new Area(areaid,areaname,parentid);
                list.add(area);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            //关闭资源
            DBUtil.closeAll();
        }
        return list;
    }
}

Entity代码

public class Area {
    private Integer areaid;
    private String areaname;
    private Integer parentid;

    public Integer getAreaid() {
        return areaid;
    }

    public void setAreaid(Integer areaid) {
        this.areaid = areaid;
    }

    public String getAreaname() {
        return areaname;
    }

    public void setAreaname(String areaname) {
        this.areaname = areaname;
    }

    public Integer getParentid() {
        return parentid;
    }

    public void setParentid(Integer parentid) {
        this.parentid = parentid;
    }

    public Area(Integer areaid, String areaname, Integer parentid) {
        this.areaid = areaid;
        this.areaname = areaname;
        this.parentid = parentid;
    }

    public Area() {
    }

    @Override
    public String toString() {
        return "Area{" +
                "areaid=" + areaid +
                ", areaname='" + areaname + '\'' +
                ", parentid=" + parentid +
                '}';
    }
}

结果如下：

小结：

（1）三级联动的实现，在数据库方面涉及到自关联的设计思想，本练习是通过pid实现

（2）onchange事件可以传递当前选中选项的值，传递到后台处理，然后在响应到页面

（3）分层设计思想MVC,降低各层的耦合性，优化代码

（4）onload页面载入函数，页面加载时执行，页面加载完成实现将省的内容全部查询出来

（5）数据响应格式（响应到页面的数据），这里使用的json格式，需要导入Gson包，实现转换

塔夫先生

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Ajax之三级联动

Ajax练习：利用Ajax实现省、市、县三级联动显示，实现代码如下：HTML代码<body onload="demo()"> 省: <select id="pro" onchange="demo1(this.value)"> <option>--请选择--</option> </select&g...
复制链接

扫一扫

专栏目录