[笔记]三级联动的实现--MVC

CodeMartain

已于 2022-05-01 11:56:15 修改

阅读量118

点赞数

分类专栏： tomcat 文章标签： mvc java 开发语言

于 2021-11-07 20:59:26 首次发布

本文链接：https://blog.csdn.net/weixin_54061333/article/details/121196108

版权

tomcat 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

该博客介绍了如何运用MVC模式和jQuery实现前端三级联动下拉菜单，通过Servlet从数据库获取数据并转化为JSON返回给前端。前端通过AJAX异步请求更新省份、城市和区域选项，同时优化了代码以减少重复。

摘要由CSDN通过智能技术生成

直接开干就行了；
在这里插入图片描述

MVC模式开搞-------》》》
先看一下整体框架结构：
在这里插入图片描述前端发送请求(异步)给servlet，servlet调用service去获取数据库的数据，然后发送到前端

准备各个层的代码------核心代码

servlet代码-----》》》

import cityPojo.Area;
import cityService.CityService;
import cityService.Imp.CityServiceImp;
import com.google.gson.Gson;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet("/CityController.do")
public class CityController extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
//给定初始值,以防未传参数时的异常;
        Integer parentid=0;
        try {//如果转换失败,做一些处理
         parentid=Integer.parseInt(req.getParameter("parentid"));
        } catch (NumberFormatException e) {
            e.printStackTrace();
        }

        CityService cityService= new CityServiceImp();
//        获得查询到的数据---list集合
        List<Area> byParentId = cityService.findByParentId(parentid);
//发送到前端,要用json对象的形式
        resp.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");
        Gson gson= new Gson();//获得gson对象，将获得的list集合转为字符串
        String cityInfo = gson.toJson(byParentId);
        //发送到前端
        resp.getWriter().write(cityInfo);
    }
}

前端代码-----》》分解—

需求是页面加载完毕就要实现省份的加载，选择完省份的时候就要加载完城市，

用jquery来实现----》》

 <script>
        // 页面加载完毕就要加载省份
        $(function () {
            $.ajax({
                    type: "GET",//get请求方式
                    url: "CityController.do?",//请求的servlet
                    data: "parentid=0",//参数
                    dataType: "json",//返回的数据类型,这样就可以直接用了,不用转换了
                    success: function (info) {//后端返回来的信息
                        $.each(info, function (i, e) {
                            // 加载完毕省份之后要知道用户选择了那个省,那怎么实现呢?
                            $("#province").append('<option value="' + e.areaid + '">' + e.areaname + '</option>');
                        })
                    }

                }
            )

        })
        function showCity(selectId){
            $.ajax({
                    type: "GET",//get请求方式
                    url: "CityController.do?",//请求的servlet
                    data: "parentid="+selectId,//参数
                    dataType: "json",//返回的数据类型,这样就可以直接用了,不用转换了
                    success: function (info) {//后端返回来的信息
                        $.each(info, function (i, e) {
                            // 加载完毕省份之后要知道用户选择了那个省,那怎么实现呢?
                            $("#city").append('<option value="' + e.areaid + '">' + e.areaname + '</option>');
                        })
                    }

                }
            )

            //alert(selectId);
        }

    </script>

在这里插入图片描述

但是写完会有一个问题-----》》
在这里插入图片描述原因是上一次的加载的信息没有清除，清除后就好了“

同样去处理区的信息
在这里插入图片描述
写完之后的效果----

在这里插入图片描述

但是重复代码太多，可以简化一下-----》》
提取方法为showArea(selectid,area)
完整的前端代码


<html>
<head>
    <title>三级联动</title>
    <script src="js/jquery.js"></script>
    <script>
        // 页面加载完毕就要加载省份
        $(function () {
           /* $.ajax({
                    type: "GET",//get请求方式
                    url: "CityController.do?",//请求的servlet
                    data: "parentid=0",//参数
                    dataType: "json",//返回的数据类型,这样就可以直接用了,不用转换了
                    success: function (info) {//后端返回来的信息
                        $.each(info, function (i, e) {
                            // 加载完毕省份之后要知道用户选择了那个省,那怎么实现呢?
                            $("#province").append('<option value="' + e.areaid + '">' + e.areaname + '</option>');
                        })
                    }

                } )*/
           showArea(0,'#province')

        })
        function showArea(selectId,area){
            $.ajax({
                    type: "GET",//get请求方式
                    url: "CityController.do?",//请求的servlet
                    data: "parentid="+selectId,//参数
                    dataType: "json",//返回的数据类型,这样就可以直接用了,不用转换了
                    success: function (info) {//后端返回来的信息
                        $(area).html("<option>--请选择--</option>");
                        $.each(info, function (i, e) {
                            // 加载完毕省份之后要知道用户选择了那个省,那怎么实现呢?onchange()
                            $(area).append('<option value="' + e.areaid + '">' + e.areaname + '</option>');
                        })
                    }

                }
            )
        }
     /*   function showCity(selectId){
            $.ajax({
                    type: "GET",//get请求方式
                    url: "CityController.do?",//请求的servlet
                    data: "parentid="+selectId,//参数
                    dataType: "json",//返回的数据类型,这样就可以直接用了,不用转换了
                    success: function (info) {//后端返回来的信息
                        $("#city").html("<option>--请选择--</option>");
                        $.each(info, function (i, e) {
                            // 加载完毕省份之后要知道用户选择了那个省,那怎么实现呢?onchange()
                            $("#city").append('<option value="' + e.areaid + '">' + e.areaname + '</option>');
                        })
                    }

                }
            )

            //alert(selectId);
        }
*/
     /*   function showRegion(selectId){
            $.ajax({
                    type: "GET",//get请求方式
                    url: "CityController.do?",//请求的servlet
                    data: "parentid="+selectId,//参数
                    dataType: "json",//返回的数据类型,这样就可以直接用了,不用转换了
                    success: function (info) {//后端返回来的信息
                        $("#region").html("<option>--请选择--</option>");
                        $.each(info, function (i, e) {
                            // 加载完毕省份之后要知道用户选择了那个省,那怎么实现呢?onchange()
                            $("#region").append('<option value="' + e.areaid + '">' + e.areaname + '</option>');
                        })
                    }

                }
            )

            //alert(selectId);
        }*/
    </script>
</head>
<body>
<%--<select id="province" onchange="showCity(this.value)">
    <option>--请选择--</option>

</select>
<select id="city" onchange="showRegion(this.value)">
    <option>--请选择--</option>
</select>
<select id="region">
    <option>--请选择--</option>
</select>--%>

<select id="province" onchange="showArea(this.value,'#city')">
<option>--请选择--</option>
</select>
<select id="city" onchange="showArea(this.value,'#region')">
    <option>--请选择--</option>
</select>
<select id="region">
    <option>--请选择--</option>
</select>
</body>
</html>