idea：java使用ajax+Servlet+JdbcTemplate实现省市县三联动

最新推荐文章于 2023-08-24 11:46:35 发布

「已注销」

最新推荐文章于 2023-08-24 11:46:35 发布

阅读量409

点赞数 2

分类专栏： Servlet JdbcTemplate Ajax 文章标签： mysql java 后端 spring

本文链接：https://blog.youkuaiyun.com/dll175/article/details/105982448

版权

Servlet 同时被 3 个专栏收录

1 篇文章

订阅专栏

JdbcTemplate

1 篇文章

订阅专栏

Ajax

1 篇文章

订阅专栏

本文介绍了如何在JavaWeb环境中，利用Ajax、Servlet和Spring的JdbcTemplate模块，实现数据库中省市县数据的三联动效果。涉及到的组件包括实体类、DAO接口及其实现、Spring配置文件、JSP页面、Servlet处理类以及Web应用的部署配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个和上一篇文章是异曲同工之处，不过这个是基于javaWeb的servlet和轻量级jdbcTemplate对数据库的操作

数据库中的表：
在这里插入图片描述

结构目录：

1.Entit层

Province

public class Province {
    public Integer pid;
    public  String pname;

    public Integer getPid() {
        return pid;
    }

    public void setPid(Integer pid) {
        this.pid = pid;
    }

    public String getPname() {
        return pname;
    }

    public void setPname(String pname) {
        this.pname = pname;
    }
}

City

public class City {
    public Integer cid;
    public String cname;

    public Integer getCid() {
        return cid;
    }

    public void setCid(Integer cid) {
        this.cid = cid;
    }

    public String getCname() {
        return cname;
    }

    public void setCname(String cname) {
        this.cname = cname;
    }
}

District层

public class District {
    public Integer dis;
    public String dname;

    public Integer getDis() {
        return dis;
    }

    public void setDis(Integer dis) {
        this.dis = dis;
    }

    public String getDname() {
        return dname;
    }

    public void setDname(String dname) {
        this.dname = dname;
    }
}

2.Dao.Iconnectionloading

public interface Iconnectionloading {
    public List<Province> selectAll();
    public List<City> selectByPid(Integer pid);
    public List<District> selectByCid(Integer cid);
}

3.Dao.Impl.conectionloadingImpl

public class conectionloadingImpl implements Iconnectionloading {

    public JdbcTemplate jdbcTemplate;

    public JdbcTemplate getJdbcTemplate() {
        return jdbcTemplate;
    }

    public void setJdbcTemplate(JdbcTemplate jdbcTemplate) {
        this.jdbcTemplate = jdbcTemplate;
    }

    @Override
    public List<Province> selectAll() {
        System.out.println("SelectALll");
        List<Province> provinceList=jdbcTemplate.query("select * from province",new BeanPropertyRowMapper<Province>(Province.class));
        return provinceList;
    }

    @Override
    public List<City> selectByPid(Integer pid) {
        List<City> cityList=jdbcTemplate.query("select * from city where pid=?",new BeanPropertyRowMapper<City>(City.class),pid);
        return cityList;
    }

    @Override
    public List<District> selectByCid(Integer cid) {
        List<District> districtList=jdbcTemplate.query("select * from district where cid=?",new BeanPropertyRowMapper<District>(District.class),cid);
        return districtList;
    }
}

4.spring.xml文件的配置

使用轻量级jdbcTemplate，

  <bean id="iconnectionloading" class="Dao.DaoImpl.conectionloadingImpl">
       <property name="jdbcTemplate" ref="JdbcTemplate"></property>
   </bean>
   
     <bean id="JdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
        <property name="dataSource" ref="datasource"/>
    </bean>
    
    <bean id="datasource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
        <property name="driverClassName" value="com.mysql.jdbc.Driver"></property>
        <property name="url" value="jdbc:mysql://localhost:3306/ssm"></property>
        <property name="password" value="123"></property>
        <property name="username" value="root"></property>
    </bean>

5.index.jsp

<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            LoadProvince();
            $("#province").change(function () {
                LoadCity($(this).val());
            })
            $("#city").change(function () {
                LoadDistrict($(this).val());
            })
        })
        function LoadProvince() {
            $("#province").empty();
            $.getJSON("LoadingServlet",{action:"province"},function (data) {

                $.each(data,function (index,item) {
                    $("#province").append("<option value="+item.pid+">"+item.pname+"</option>");
                })
                LoadCity($("#province").val())
            })
        }
        function LoadCity(id) {
            $("#city").empty();
            $.getJSON("LoadingServlet",{action:"city",pid:id},function (data) {
                $.each(data,function (index,item) {
                    $("#city").append("<option value="+item.cid+">"+item.cname+"</option>");
                })
                LoadDistrict($("#city").val())
            })
        }
        function LoadDistrict(id) {
            $("#district").empty();
            $.getJSON("LoadingServlet",{action:"district",cid:id},function (data) {
                $.each(data,function (index,item) {
                    $("#district").append("<option value="+item.did+">"+item.dname+"</option>");
                })
            })
        }
    </script>
</head>
<body>
请选择省：<select id="province"></select>
请选择市：<select id="city"></select>
请选择县：<select id="district"></select>
</body>

6.MyServlet.LoadingServlet

public class LoadingServlet extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("执行了doGet");
        String action=request.getParameter("action");
        JSONObject jsonObject=new JSONObject();
        BeanFactory beanFactory=new ClassPathXmlApplicationContext("spring.xml");
        Iconnectionloading iconnectionloading= (Iconnectionloading) beanFactory.getBean("iconnectionloading");
        if(action.equals("province")){
            PrintWriter printWriter=response.getWriter();
            List<Province> provinceList=iconnectionloading.selectAll();
            jsonObject.put("provinceList",provinceList);
            printWriter.print( jsonObject.get("provinceList"));

        }
        else if(action.equals("city")){
            PrintWriter printWriter=response.getWriter();
            Integer pid=Integer.parseInt(request.getParameter("pid"));
            List<City> cityList=iconnectionloading.selectByPid(pid);
            jsonObject.put("cityList",cityList);
            printWriter.print( jsonObject.get("cityList"));
        }
        else if(action.equals("district")){
            PrintWriter printWriter=response.getWriter();
            Integer cid=Integer.parseInt(request.getParameter("cid"));
            List<District> districtList=iconnectionloading.selectByCid(cid);
            jsonObject.put("districtList",districtList);
            printWriter.print( jsonObject.get("districtList"));
        }
    }

7.Web.xml文件的配置

<servlet>
    <servlet-name>LoadingServlet</servlet-name>
    <servlet-class>MyServlet.LoadingServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>LoadingServlet</servlet-name>
    <url-pattern>/LoadingServlet</url-pattern>
  </servlet-mapping>

8.结果显示：
在这里插入图片描述