利用Ajax异步请求局部刷新的特性实现省市区三级联动

最新推荐文章于 2022-11-27 11:08:33 发布

李青椒bbll

最新推荐文章于 2022-11-27 11:08:33 发布

阅读量227

点赞数

文章标签： ajax java 数据库

本文链接：https://blog.csdn.net/weixin_54498280/article/details/126041885

版权

文章目录

前言
一、导入数据库
二、代码步骤如下
详细代码如下

前言

本文详细记载了如何实现省市区三级联动。其效果如下图

在选择省份的时候显示对应的城市，在选择对应的城市后，显示对应的区县。

一、导入数据库

导入全国的省份，城市，区县的数据库
省份数据库下载并导入省份数据库
城市数据库下载并导入城市数据库
区县数据库下载并导入区县数据库

二、代码步骤如下

1.写jsp页面

代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <tittle>省市县三级联动</tittle>
</head>
<body>
    省份：<select>
        <option>------请选择省份-------</option>
    </select>
    城市：<select>
        <option>------请选择城市-------</option>
    </select>
    区县：<select>
        <option>------请选择区县-------</option>
    </select>
</body>
</html>

2.查找数据库并把信息返回到jsp页面

如找到所有地区并代码如下：

private void selectArea(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        List<Map<String, Object>> areaList = new ArrayList<>();
        String cityId = req.getParameter("cityId");

        //连接数据查找所有省份
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;

        try {
            connection = JDBCUtil.getConnection();
            String sql = "select * from tm_area where city_id = ?";
            statement = connection.prepareStatement(sql);
            statement.setInt(1,Integer.parseInt(cityId));
            resultSet = statement.executeQuery();
            System.out.println(statement);
            while (resultSet.next()) {
                int id = resultSet.getInt("id");
                String area = resultSet.getString("area");
                Map<String, Object> map = new HashMap<>();
                map.put("id",id);
                map.put("area",area);
                areaList.add(map);
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        } finally {
            JDBCUtil.close(connection, statement, resultSet);
        }

        ObjectMapper objectMapper = new ObjectMapper();
        resp.setContentType("text/html;charset=utf-8");
        objectMapper.writeValue(resp.getWriter(), areaList);
    }
}

2.返回给数据库根据返回的信息创建option选项

$('#city').change(function (){
                var cityId = $(this).val();
                $('#area option:gt(0)').remove();
                $.post(
                '${pageContext.request.contextPath}/ajax4?method=selectArea&cityId=' + cityId,
                    function (areaList){
                        $.each(areaList, function () {
                            $('#area').append('<option value="' + this.id + '">' + this.area + '</option>')
                        })
                    },
                    'json'
                    )
            });

详细代码如下

java代码

package com.web.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.web.util.JDBCUtil;

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.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@WebServlet("/ajax4")
public class Ajax4Servlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String method = req.getParameter("method");
        switch (method) {
            case "selectProvince":
                selectProvince(req, resp);
                break;
            case "selectCity":
                selectCity(req, resp);
                break;
            case "selectArea":
                selectArea(req, resp);
                break;
        }
    }

    private void selectProvince(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        System.out.println("Ajax4Servlet.selectProvince");
        //目的就是把一个省的id，省的名字放入Map，并把一个个省Map组成的list改造成json格式数据返回给客服端即jsp界面
        List<Map<String, Object>> provinceList = new ArrayList<>();

        //连接数据查找所有省份
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;

        try {
            connection = JDBCUtil.getConnection();
            String sql = "select * from tm_province";
            statement = connection.prepareStatement(sql);
            resultSet = statement.executeQuery();
            System.out.println(statement);
            while (resultSet.next()) {
                int id = resultSet.getInt("id");
                String province = resultSet.getString("province");
                Map<String, Object> map = new HashMap<>();
                map.put("id",id);
                map.put("province",province);
                provinceList.add(map);
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        } finally {
            JDBCUtil.close(connection, statement, resultSet);
        }

        ObjectMapper objectMapper = new ObjectMapper();
        resp.setContentType("text/html;charset=utf-8");
        objectMapper.writeValue(resp.getWriter(), provinceList);
    }

    private void selectCity(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        List<Map<String, Object>> cityList = new ArrayList<>();
        String provinceId = req.getParameter("provinceId");

   
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;

        try {
            connection = JDBCUtil.getConnection();
            String sql = "select * from tm_city where province_id = ?";
            statement = connection.prepareStatement(sql);
            statement.setInt(1,Integer.parseInt(provinceId));
            resultSet = statement.executeQuery();
            System.out.println(statement);
            while (resultSet.next()) {
                int id = resultSet.getInt("id");
                String city = resultSet.getString("city");
                Map<String, Object> map = new HashMap<>();
                map.put("id",id);
                map.put("city",city);
                cityList.add(map);
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        } finally {
            JDBCUtil.close(connection, statement, resultSet);
        }

        ObjectMapper objectMapper = new ObjectMapper();
        resp.setContentType("text/html;charset=utf-8");
        objectMapper.writeValue(resp.getWriter(), cityList);
    }

    private void selectArea(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        List<Map<String, Object>> areaList = new ArrayList<>();
        String cityId = req.getParameter("cityId");


        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;

        try {
            connection = JDBCUtil.getConnection();
            String sql = "select * from tm_area where city_id = ?";
            statement = connection.prepareStatement(sql);
            statement.setInt(1,Integer.parseInt(cityId));
            resultSet = statement.executeQuery();
            System.out.println(statement);
            while (resultSet.next()) {
                int id = resultSet.getInt("id");
                String area = resultSet.getString("area");
                Map<String, Object> map = new HashMap<>();
                map.put("id",id);
                map.put("area",area);
                areaList.add(map);
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        } finally {
            JDBCUtil.close(connection, statement, resultSet);
        }

        ObjectMapper objectMapper = new ObjectMapper();
        resp.setContentType("text/html;charset=utf-8");
        objectMapper.writeValue(resp.getWriter(), areaList);
    }
}

jsp代码

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 14502
  Date: 2022/7/27
  Time: 22:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="static/js/jquery-2.1.4.js"></script>
<html>
<head>
    <tittle>省市县三级联动</tittle>
</head>
<body>
    省份：<select id="province">
        <option>------请选择省份-------</option>
    </select>
    城市：<select id="city">
        <option>------请选择城市-------</option>
    </select>
    区县：<select id="area">
        <option>------请选择区县-------</option>
    </select>

    <script>
        $(function () {
          $.post(
              '<%=request.getContextPath()%>/ajax4?method=selectProvince',
              function(provinceList) {
                  $.each(provinceList, function () {
                      //        <option value="id">山东</option>
                      $('#province').append('<option value="' + this.id + '">' + this.province + '</option>')
                  });
              },
              'json'
          );

          $('#province').change(function (){
              var provinceId = $(this).val();
              $('#area option:gt(0)').remove();
              $('#city option:gt(0)').remove();
              $.post(
                  '${pageContext.request.contextPath}/ajax4?method=selectCity&provinceId=' + provinceId,
                  function (cityList){
                        $.each(cityList, function () {
                            $('#city').append('<option value="' + this.id + '">' + this.city + '</option>')
                        })
                  },
                  'json'
                  )
          });

            $('#city').change(function (){
                var cityId = $(this).val();
                $('#area option:gt(0)').remove();
                $.post(
                '${pageContext.request.contextPath}/ajax4?method=selectArea&cityId=' + cityId,
                    function (areaList){
                        $.each(areaList, function () {
                            $('#area').append('<option value="' + this.id + '">' + this.area + '</option>')
                        })
                    },
                    'json'
                    )
            });
        });
    </script>
</body>
</html>