AJAX实现省市区三级联动效果

最新推荐文章于 2023-07-26 18:38:29 发布
最新推荐文章于 2023-07-26 18:38:29 发布
阅读量433 收藏 10
点赞数 1
文章标签： 数据库 mysql ajax jdbc servlet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s990420/article/details/114368245
版权

操作数据库和前端页面：

1、在数据库中建表
（1）省province
在这里插入图片描述
（2）市city
在这里插入图片描述
（3）区area
在这里插入图片描述
2、创建DB_Helper连接数据库

package cn.su.util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class DB_Helper {
    public static final String URL = "jdbc:mysql://localhost:3306/school?characterEncoding=utf8&useSSL=false&serverTimezone=UTC";
    public static final String USERNAME = "root";
    public static final String PASSWORD = "123456";

    // 定义数据库的连接对象
    public static Connection conn;
    // 数据库连接对象
    public static Connection getConn(){
        try {
            // 加载驱动
            Class.forName("com.mysql.jdbc.Driver");
            try {
                // 驱动管理得到数据库的连接并返回一个数据库对象
                conn= DriverManager.getConnection(URL, USERNAME, PASSWORD);
            } catch (SQLException e) {
                e.printStackTrace();
            }
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
        return conn;
    }
    // 关闭数据库连接
    public static void closeConn(Connection conn){
        if (conn!=null){
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }

    public static void main(String[] args) {
        System.out.println(DB_Helper.getConn());
    }
}

3、前端页面

<%--
  Created by IntelliJ IDEA.
  User: manager
  Date: 2021/3/3
  Time: 11:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>省市区三级联动</title>
    <script src="jquery/jquery-3.4.1.js"></script>
    <%--省--%>
    <script>
        $(function () {
            $.ajax({
                type: "get",
                url: "findprovince",
                dataType: "json",
                success: function (data) {
                    var obj = $("#province");
                    for (var i = 0; i < data.length; i++) {
                        var ob = "<option value='" + data[i].pid + "'>" + data[i].pname + "</option>";
                        obj.append(ob);
                    }
                }
            })
        })
    </script>

</head>
<body>
<select name="province" id="province">
    <option value="0">请选择</option>
</select>省

<select name="city" id="city">
    <option value="0">请选择</option>
</select>市

<select name="area" id="area">
    <option value="0">请选择</option>
</select>县
<%--市--%>
<script>
    function city() {
        $(function () {
            $("#city option").remove();
            $.ajax({
                type: "get",
                async: false,
                url: "findcity?pid=" + $("#province").val(),
                dataType: "json",
                success: function (data) {
                    var obj = $("#city");
                    for (var i = 0; i < data.length; i++) {
                        var ob = "<option value='" + data[i].cid + "'>" + data[i].cname + "</option>";
                        obj.append(ob);
                    }
                }
            })
        })
    }
</script>

<%--区--%>
<script>
    function area() {
        $(function () {
            $("#area option").remove();
            $.ajax({
                type: "get",
                async: false,
                url: "findarea?cid=" + $("#city").val(),
                dataType: "json",
                success: function (data) {
                    var obj = $("#area");
                    for (var i = 0; i < data.length; i++) {
                        var ob = "<option value='" + data[i].aid + "'>" + data[i].aname + "</option>";
                        obj.append(ob);
                    }
                }
            })
        })
    }
</script>
<script>
    $("#province").change(function () {
        city();
        area();
    });
    $("#city").change(function () {
        area();
    });
</script>
</body>
</html>

一、省：

1、创建省的实体类

package cn.su.domain;

// 省的实体类
public class Province {
    private int pid;
    private String pname;

    public int getPid() {
        return pid;
    }

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

    public String getPname() {
        return pname;
    }

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

    public Province(int pid, String pname) {
        this.pid = pid;
        this.pname = pname;
    }

    public Province() {
    }
}

2、创建搜索省的接口

package cn.su.dao;
import cn.su.domain.Province;
import java.util.List;

public interface ProvinceDao {
    public List<Province> FindAll();
}

3、创建搜索省接口的实现类

package cn.su.dao.impl;

import cn.su.dao.ProvinceDao;
import cn.su.domain.Province;
import cn.su.util.DB_Helper;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class ProvinceImpl implements ProvinceDao {
    @Override
    public List<Province> FindAll() {
        List<Province> lists = new ArrayList<Province>();
        // 1、获得数据库的连接对象
        Connection conn = DB_Helper.getConn();
        // 2、书写SQL语句
        String sql = "select * from province";
        try {
            // 3、预编译SQL语句
            PreparedStatement ps = conn.prepareStatement(sql);
            // 4、执行查询命令
            ResultSet rs = ps.executeQuery();
            // 5、循环读取结果集中的数据
            while (rs.next()){
                Province province = new Province();
                province.setPid(rs.getInt(1));
                province.setPname(rs.getString(2));
                lists.add(province);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return lists;
    }
}

4、创建搜索省的servlet

package cn.su.servlet;

import cn.su.dao.ProvinceDao;
import cn.su.dao.impl.ProvinceImpl;
import cn.su.domain.Province;
import com.alibaba.fastjson.JSONObject;

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("/findprovince")
public class FindProvince extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 设置编码格式
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");

        ProvinceDao pi = new ProvinceImpl();
        List<Province> lists = pi.FindAll();

        response.getWriter().write(JSONObject.toJSONString(lists));

        this.doPost(request, response);
    }
}

二、市：

1、创建市的实体类

package cn.su.domain;

// 市的实体类
public class City {
    private int cid;
    private String cname;
    private int pid;

    public int getCid() {
        return cid;
    }

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

    public String getCname() {
        return cname;
    }

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

    public int getPid() {
        return pid;
    }

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

    // 定义有参的构造方法
    public City(int cid, String cname, int pid) {
        this.cid = cid;
        this.cname = cname;
        this.pid = pid;
    }

    public City() {
    }
}

2、创建搜索市的接口

package cn.su.dao;

import cn.su.domain.City;
import java.util.List;

public interface CityDao {
    public List<City> FindAllCity(int pid);
}

3、创建搜索市接口的实现类

package cn.su.dao.impl;

import cn.su.dao.CityDao;
import cn.su.domain.City;
import cn.su.util.DB_Helper;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class CityImpl implements CityDao {
    @Override
    public List<City> FindAllCity(int pid) {
        List<City> lists = new ArrayList<City>();
        // 1、获得数据库的连接对象
        Connection conn = DB_Helper.getConn();
        // 2、书写SQL数据
        String sql = "select * from city where pid=?";
        try {
            // 预编译sql语句
            PreparedStatement ps = conn.prepareStatement(sql);
            // 占位符赋值
            ps.setInt(1,pid);
            // 执行查询命令
            ResultSet rs = ps.executeQuery();
            // 循环读取结果集中的数据
            while (rs.next()){
                City city = new City();
                city.setCid(rs.getInt(1));
                city.setCname(rs.getString(2));
                city.setPid(rs.getInt(3));
                lists.add(city);
            }

        } catch (SQLException e) {
            e.printStackTrace();
        }
        return lists;
    }
}

4、创建搜索市的servlet

package cn.su.servlet;

import cn.su.dao.CityDao;
import cn.su.dao.impl.CityImpl;
import cn.su.domain.City;
import com.alibaba.fastjson.JSONObject;

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("/findcity")
public class FindCity extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");

        String pid = request.getParameter("pid");

        CityDao city = new CityImpl();
        List<City> cities = city.FindAllCity(Integer.parseInt(pid));

        response.getWriter().write(JSONObject.toJSONString(cities));

        this.doPost(request, response);
    }
}

三、区：

1、创建区的实体类

package cn.su.domain;

public class Area {
    private int aid;
    private String aname;
    private int cid;

    public int getAid() {
        return aid;
    }

    public void setAid(int aid) {
        this.aid = aid;
    }

    public String getAname() {
        return aname;
    }

    public void setAname(String aname) {
        this.aname = aname;
    }

    public int getCid() {
        return cid;
    }

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

    public Area(int aid, String aname, int cid) {
        this.aid = aid;
        this.aname = aname;
        this.cid = cid;
    }

    public Area() {
    }
}

2、创建搜索区的接口

package cn.su.dao;

import cn.su.domain.Area;

import java.util.List;

public interface AreaDao {
    public List<Area> FindAllArea(int cid);
}

3、创建搜索区接口的实现类

package cn.su.dao.impl;

import cn.su.dao.AreaDao;
import cn.su.domain.Area;
import cn.su.util.DB_Helper;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class AreaImpl implements AreaDao {
    @Override
    public List<Area> FindAllArea(int cid) {
        List<Area> areas = new ArrayList<Area>();
        // 1、获得数据库的连接对象
        Connection conn = DB_Helper.getConn();
        // 2、书写SQL语句
        String sql = "select * from area where cid=?";
        try {
            // 3、预编译SQL语句
            PreparedStatement ps = conn.prepareStatement(sql);
            // 4、占位符赋值
            ps.setInt(1,cid);
            // 5、执行查询命令
            ResultSet rs = ps.executeQuery();
            // 循环读取结果集中的数据
            while (rs.next()){
                Area area = new Area();
                area.setAid(rs.getInt(1));
                area.setAname(rs.getString(2));
                area.setCid(rs.getInt(3));
                areas.add(area);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return areas;
    }
}

4、创建搜索区的servlet

package cn.su.servlet;

import cn.su.dao.impl.AreaImpl;
import cn.su.domain.Area;
import com.alibaba.fastjson.JSONObject;

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("/findarea")
public class FindArea extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");

        String cid = request.getParameter("cid");

        AreaImpl area = new AreaImpl();
        List<Area> areas = area.FindAllArea(Integer.parseInt(cid));

        response.getWriter().write(JSONObject.toJSONString(areas));

        this.doPost(request, response);
    }
}

结果如下：
在这里插入图片描述

tlysys
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
PHP+Mysql+Ajax+JS实现省市区三级联动
10-25
最近做了个项目，需要用到省市区三级联动，上网翻了不少资料，于是有了下面的思路和代码
jquery+ajax实现省市区三级联动效果简单示例
10-20
主要介绍了jquery+ajax实现省市区三级联动效果,结合实例形式分析了jQuery结合ajax实现省市区三级联动功能的具体步骤与相关操作技巧,需要的朋友可以参考下
AJAX技术图解
Shadow的专栏
08-01 1082
     如今，随着Gmail、Google-maps的应用和各种浏览器的支持，AJAX正逐渐吸引全世界的眼球。上一篇AJAX技术（.net篇）已经做了关于AJAX技术的例子。写这篇文章的目的是用图形的方式分析一下AJAX技术的本质！   传统的Web应用采用同步交互过程，这种情况下，用户首先向HTTP服务器触发一个行为或请求的呼求。反过来，服务器执行某些任务，再向发出请求的用户返回一个HTM
使用ajax和json实现省市区三级联动
qq_37244082的博客
02-21 3788
使用ajax和json实现省市区三级联动 运行效果 HTML部分 &lt;div id="address"&gt; &lt;label&gt;家庭住址：&lt;/label&gt; &lt;select id="provice"&gt; &lt;op
【愚公系列】2022年08月 微信小程序-省市区三联动功能实现
时光隧道
08-31 1万+
多级联动下拉菜单是前端常见的效果，省市区三级联动又属于其中最典型的案例。多级联动一般都是与数据相关联的，根据数据来生成和修改联动的下拉菜单。完成一个多级联动效果，有助于增强对数据处理的能力。数据可以是后台从数据库读出来的数据，也可以是在JS里直接写的数据。但无论是哪种形式，三个数组的数据都是有关联的。citys，市数组，里面每一项内容都有一个属性表示这个市是属于哪个省的，即对应的是省数组里的id。同样areas，区数组，里面都有属性是对应市数组里的id，表示这个区是属于哪个市的。...
AJAX实现省市区三级联动
12-28
使用AJAX从数据库中读取省、市、地区的数据，添加到select的option选项，实现自动筛选。
省市区三级联动代码ajax,jquery+ajax实现省市区三级联动 （封装和不封装两种方式）...
weixin_42576186的博客
08-05 527
首先，要实现如下图效果，1、要理清思路：先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容，第三个同理。2、用到的数据库表：Chinastates表规律：根据国家级(中国)的areacode查询省级(如：北京) ; 根据省级的areacode查询市级(如：北京市辖)；根据市级的areacode查询区级(如东城区)第一种方式：没有用到封装，数据读取较慢，可以看看原理，...
初识Ajax
买米当卡的博客
03-04 599
初识Ajax 一、同步交互和异步交互 举个例子：普通B/S模式(同步) AJAX技术(异步) 同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事 异步: 请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕 同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。 异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式 易懂的理解: 异步传输：你传输吧，我去做我的事了，传
Ajax+jQuery实现省市区三级联动功能
01-05
实现：省级下拉变化时市下拉区下拉跟着变化，市级下拉变化时区下拉跟着变化。
ajax实现省市区三级联动
qq_15901351的博客
07-17 7146
案例：从数据库获取数据实现省市区三级联动，如下图所示 思路：网页初始化时，先获取所有的省份，通过被选中的省份id去获取所有城市，在通过被选中的城市id去加载所有的区县， 当所选的省市的id发生改变时，触发change事件，去加载相应的省市区。 代码如下： html:                                  &lt;div class="input-group...
ajax省市区三级联动代码
12-16
使用ajax + servlet + jdbc做的省市区三级联动，内含sql文件。对应有博客介绍，欢迎访问http://blog.csdn.net/qq_19558705/article/details/50318981
ajax实现省市县三级联动
01-07
在做开发的时候我们难免会用到省市县三级联动的功能，所以我写了一个用ajax实现省市县三级联动。希望可以帮到你们，里面的代码我都注释的非常详细。有看不懂地方可以给我留言
省市区三级联动的JS效果
08-16
JS级联菜单省市区三级联动的JS效果省市区三级联动的JS效果
java+ajax+mysql实现省市县三级联动
05-21
主要用于三级联动，使用的html，ajax，后端用的原生servlet，或者你也可以根据自己的需要使用框架，毕竟只是做了数据库查询操作，返回的是json格式的数据，所以对后端要求不高，本资源为自己整理出来的，当然数据库...
JQuery+Ajax实现省市区三级联动（附效果图+数据库）
热门推荐
NaMgAl_的博客
01-09 3万+
一、效果图 1、页面加载后（初始化：北京市-北京市-东城区） 2、单击选择省份后（改变成：河北省-石家庄市-长安区） 二、jsp页面 省市区三级联动 $(function() { // 初始化省市区 initAddress(); // 更改省份后的操作 $("select[name='province']").change(func
省市区三级联动功能实现(前端+后端)
最新发布
m0_64714024的博客
07-26 1504
省市区三级联动前后端实现全过程
AJAX+JSON 实现省市县地名三级联动
侯春强的博客
10-13 1890
AJAX+JSON  实现省市县地名三级联动 本案例运用到三层架构（表现层，服务层、持久层）表现层调用服务层的方法，服务层调用持久层的方法，使用数据库为Oracle数据库，在数据库中创建一张名为address的数据表。具体字段和插入的数据如下 address.sql [sql] view plain copy "font-family
mysql省市区级联数据_Ajax实现省市区三级级联(数据来自mysql数据库)
weixin_31304499的博客
01-20 173
实现Ajax实现省市区三级级联，需要Java解析json技术整体Demo下载地址如下: 点我下载address.htmlInsert title here/*** 得到XMLHttpRequest对象*/function getajaxHttp() {var xmlHttp;try {// Firefox, Opera 8.0+, SafarixmlHttp = new XMLHttpReques...
省市区（县）三级联动 效果
diruanye2939的博客
03-31 233
数据库.js { 这 } JS下拉选择框实现省市区（县）三级联动 - Ms_WangH - CSDN博客 原生JS实现省市区（县）三级联动选择 - Visugar - CSDN博客 jq 省市区三级联动插件 ：distpicker - 简书 　　省市区地址三级联动jQuery插件Distpicker使用 - idjl - 博客园{这个有实例} 中...
jquery ajax 省市县,jquery+ajax实现省市区三级联动效果简单示例
05-24
以下是一个简单的基于 jQuery 和 Ajax 实现省市县三级联动的示例代码： HTML 代码： ```html 请选择省份 请选择城市 请选择区县 ``` JavaScript 代码： ```javascript $(function() { // 加载省份...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值