ajax+jQuery实现省市区下拉框三级联动

最新推荐文章于 2024-06-17 09:40:09 发布
最新推荐文章于 2024-06-17 09:40:09 发布
阅读量689 收藏 9
点赞数 6
分类专栏： jquery ajax 文章标签： ajax jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDN9825/article/details/114371548
版权

一、准备工作
数据库：
province（省）
在这里插入图片描述
city（市）
在这里插入图片描述
area（区）
在这里插入图片描述
utils工具包：
连接数据库

package cn.zc.utils;

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

public class DBHelper {
    //    Mysql5.5及以上版本需要在数据库名称后面添加?charart---等解释,5.5以下的版本则不用
    public static final String URL="JDBC:mysql://localhost:3306/chick?characterEncoding=utf8&useSSL=false&serverTimezone=UTC";
    //    数据库账号
    public static final String USERNAME="root";
    //    账号密码
    public static final String PSW="123456";
    public static Connection Conn;

    public static Connection getConn(){
        try {
            Class.forName("com.mysql.jdbc.Driver");
            try {
                Conn = DriverManager.getConnection(URL,USERNAME,PSW);
            } 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(DBHelper.getConn());
    }
}

domin包：
Province对象

package cn.zc.domain;

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;
    }

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

    public Province() {
    }

    @Override
    public String toString() {
        return "Province{" +
                "pid=" + pid +
                ", pname='" + pname + '\'' +
                '}';
    }
}

City对象：

package cn.zc.domain;

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

    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;
    }

    public Integer getPid() {
        return pid;
    }

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

    public City() {
    }

    public City(Integer cid, String cname, Integer pid) {
        this.cid = cid;
        this.cname = cname;
        this.pid = pid;
    }

    @Override
    public String toString() {
        return "City{" +
                "cid=" + cid +
                ", cname='" + cname + '\'' +
                ", pid=" + pid +
                '}';
    }
}

Area对象：

package cn.zc.domain;

public class Area {

    public Integer aid;
    public String aname;
    public Integer cid;

    public Integer getAid() {
        return aid;
    }

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

    public String getAname() {
        return aname;
    }

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

    public Integer getCid() {
        return cid;
    }

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

    public Area() {
    }

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

    @Override
    public String toString() {
        return "Area{" +
                "aid=" + aid +
                ", aname='" + aname + '\'' +
                ", cid=" + cid +
                '}';
    }
}

二、前端页面

<%--
  Created by IntelliJ IDEA.
  User: zhang
  Date: 2021/03/03
  Time: 11:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>三级联动</title>
    <script src="js/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);
                    }
                }
            });

            $('#province').change(function () {
                $('#city option').remove();
                $.ajax({
                    type:"get",
                    //关闭异步
                    async:false,
                    url:"findcity?id="+$('#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);
                        }
                    }
                });
            });

            $('#city,#province').change(function () {//省或市任一更改时，区都会发生变化
                $('#area option').remove();
                $.ajax({
                    type:"get",
                    async:false,
                    url:"findarea?id="+$('#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>
</head>
<body>
    <select id="province">
        <option value="0" disabled selected hidden>请选择</option>
    </select>省
    <select id="city">
        <option value="0" disabled selected hidden>请选择</option>
    </select>市
    <select id="area">
        <option value="0" disabled selected hidden>请选择</option>
    </select>区/县
</body>
</html>

三、构建后端实现方法
province
servlet层：

package cn.zc.servlet;

import cn.zc.dao.Impl.ProvinceDaoImpl;
import cn.zc.dao.ProvinceDao;
import cn.zc.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.ArrayList;

@WebServlet("/findprovince")
public class FindProvinceServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        ArrayList<Province> plists = new ArrayList<>();
        ProvinceDao provinceDao = new ProvinceDaoImpl();
        plists = provinceDao.findprovince();
        response.getWriter().write(JSONObject.toJSONString(plists));
    }

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

Dao和Impl

package cn.zc.dao;

import cn.zc.domain.Province;

import java.util.ArrayList;

public interface ProvinceDao {
    ArrayList<Province> findprovince();
}


package cn.zc.dao.Impl;

import cn.zc.dao.ProvinceDao;
import cn.zc.domain.Province;
import cn.zc.utils.DBHelper;

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

public class ProvinceDaoImpl implements ProvinceDao {
    @Override
    public ArrayList<Province> findprovince() {
        ArrayList<Province> lists = new ArrayList<>();
        Connection conn = DBHelper.getConn();
        String sql = "select *from province";
        try {
            PreparedStatement ps = conn.prepareStatement(sql);
            ResultSet rs = ps.executeQuery();
            while(rs.next()){
                Province pro = new Province();
                pro.setPid(rs.getInt(1));
                pro.setPname(rs.getString(2));
                lists.add(pro);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return lists;
    }
}

city：
servlet：

package cn.zc.servlet;

import cn.zc.dao.CityDao;
import cn.zc.dao.Impl.CityDaoImpl;
import cn.zc.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.ArrayList;

@WebServlet("/findcity")
public class FindCityServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        ArrayList<City> clist = new ArrayList<>();
        String id = request.getParameter("id");
        CityDao cityDao = new CityDaoImpl();
        clist = cityDao.findCityById(Integer.parseInt(id));
        response.getWriter().write(JSONObject.toJSONString(clist));
    }

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

dao和Impl

package cn.zc.dao;

import cn.zc.domain.City;

import java.util.ArrayList;

public interface CityDao {
    ArrayList<City> findCityById(int id);
}


package cn.zc.dao.Impl;

import cn.zc.dao.CityDao;
import cn.zc.domain.City;
import cn.zc.utils.DBHelper;

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

public class CityDaoImpl implements CityDao {
    @Override
    public ArrayList<City> findCityById(int id) {
        Connection conn = DBHelper.getConn();
        ArrayList<City> clist = new ArrayList<>();
        String sql = "select *from city where pid=?";
        try {
            PreparedStatement ps = conn.prepareStatement(sql);
            ps.setInt(1,id);
            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));
                clist.add(city);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return clist;
    }
}

Area：
servlet：

package cn.zc.servlet;

import cn.zc.dao.AreaDao;
import cn.zc.dao.Impl.AreaDaoImpl;
import cn.zc.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.ArrayList;

@WebServlet("/findarea")
public class FindAreaServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        ArrayList<Area> alist = new ArrayList<>();
        String id = request.getParameter("id");
        AreaDao areaDao = new AreaDaoImpl();
        alist = areaDao.findAreaById(Integer.parseInt(id));
        response.getWriter().write(JSONObject.toJSONString(alist));
    }

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

Dao和Impl

package cn.zc.dao;

import cn.zc.domain.Area;

import java.util.ArrayList;

public interface AreaDao {
    ArrayList<Area> findAreaById(int id);
}


package cn.zc.dao.Impl;

import cn.zc.dao.AreaDao;
import cn.zc.domain.Area;
import cn.zc.utils.DBHelper;

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

public class AreaDaoImpl implements AreaDao {
    @Override
    public ArrayList<Area> findAreaById(int id) {
        ArrayList<Area> alist = new ArrayList<>();
        Connection conn = DBHelper.getConn();
        String sql = "select *from area where cid=?";
        try {
            PreparedStatement ps = conn.prepareStatement(sql);
            ps.setInt(1,id);
            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));
                alist.add(area);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return alist;
    }
}
张超@-@
关注
  • 6
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
idea工具，SSM+Shiro+Ajax+jQuery+Thymeleaf
08-15
比较实用的简单项目，适合练习数据库的增删改查，框架与技术：SSM+Shiro+Ajax+jQuery+Thymeleaf
ssm框架省市区三级联动
c782699991的博客
02-07 3725
省市县三级联动是web开发中常用的功能，网上有很多实现的方法，笔者在这也提供一中ajax实现的方法(后台java处理)。 现在使用light7写手机的前台页面，以前的省市区不能完美运行，现在这个可以在light7框架中完美运行，其实还可以优化，有时间再来优化 12 html代码： html> head> meta http-equiv="Content-Type" content="t
使用css和html实现三级联动菜单
最新发布
qq_57218855的博客
06-17 217
注：可根据自己的需求进行样式的修改，这里的菜单栏联动主要用到了定位position。
使用ajax实现省市区三级联动基于SSM框架
weixin_43667093的博客
10-22 345
一、效果图： 项目百度网盘地址： 链接：https://pan.baidu.com/s/1QTQC8ccoYd2pnbMvtwafJg&shfl=sharepset 提取码：7id8 复制这段内容后打开百度网盘手机App，操作更方便哦 二、项目整体结构： 三、JSP页面： <%@ page language="java" contentType="text/html; chars...
用ajax做三级联动,利用Ajax怎么实现一个三级联动功能
weixin_29924799的博客
08-06 561
利用Ajax怎么实现一个三级联动功能发布时间：2021-03-08 11:05:27来源：亿速云阅读：76作者：Leah本篇文章给大家分享的是有关利用Ajax怎么实现一个三级联动功能，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。首先建立数据库，如下所示接口省importjava.util.List;publicinterface...
Thymeleaf+jquery+Ajax 前后端交互（简单）+局部刷新+datatable局部刷新+页面间传值
qq_41850449的博客
09-17 1万+
使用Thymeleaf模板引擎，前后端未分离： .html文件： <script> function refresh(){ $.ajax({ url: "/do", type: 'post', contentType: 'application/json', async: true, ...
jquery+ajax实现省市区三级联动效果简单示例
10-20
总的来说，这个示例展示了如何使用jQuery和Ajax技术来实现动态的省市区三级联动。它利用了jQuery的简便API来处理DOM操作和Ajax请求，使得代码简洁易懂。在实际项目中，可以根据需要进行扩展，例如增加错误处理、优化...
jQuery弹出式下拉框省市区三级联动地区选择插件
10-24
总的来说，这个"jQuery弹出式下拉框省市区三级联动地区选择插件"利用jQuery实现了高效、流畅的地区选择体验，通过预加载的地区数据实现了三级联动效果，而`index.html`、`js`和`img`文件则分别提供了页面结构、功能...
jQuery下拉框三级联动插件
06-24
在IT领域，jQuery下拉框三级联动插件是一种常见的交互设计技术，主要应用于网页表单中，例如在选择地址时的省市区选择。这个插件能够实现用户在选择省份后，下拉框自动更新出对应城市的选项，进一步选择城市后，再...
jQuery省市区三级联动下拉框特效代码
03-20
首先，`jQuery省市区三级联动下拉框`这个项目是基于`jquery-1.8.2.min.js`构建的，这意味着它依赖于jQuery 1.8.2版本。jQuery是一个强大的JavaScript库，提供了一套高效的DOM操作、事件处理、动画效果以及Ajax交互等...
jQuery省市区三级联动下拉框
05-01
在网页开发中，"jQuery省市区三级联动下拉框"是一种常见的交互设计，它用于实现用户在选择省份时，相应的城市和区县下拉框会动态更新，展示与所选省份对应的数据。这种功能通常应用于地址填写、订单提交等场景，能够...
三级联动.html
11-30
页面三级联动显示，层级显示，联动三级。。。。。。。。
ssm 省市县三级联动
weixin_43470118的博客
10-29 732
实体类： import java.io.Serializable; public class Test implements Serializable{ /** * */ private static final long serialVersionUID = 1L; private String proName; private String cityName; priv...
简单实用ssm+json+ajax三级联动
孙振光的博客
01-12 1万+
有些伙伴听到做三级联动就觉得很难，单你看了这个你会觉得很简单的，说白了就是两个2级联动。这个demo是在ssm的基础上用通过json+ajax实现的！可能做的不好，希望大家见解！ 这里用到jsonArray这个这个类，所以关于这个类的包及相关包（比如：commons-beanutils-1.9.2.jar，commons-collections-3.2.2.jar等）一定要齐。在这里说声抱歉，我
使用vue elementUI设置省市县三级联动的下拉列表框
热门推荐
Zhou_siyue的博客
04-01 2万+
在前端项目开发中，经常会遇到省市县三级联动的下拉列表框组的问题，许多小伙伴第一次遇到这种问题的时候都会感觉无从下手，今天就给大家分享以下我的实现方法，希望能给大家在这方面的问题上提供一些帮助和解决的思路，以便今后在遇到同类问题的时候可以轻松应对，以下内容为具体的实现过程： ...
HTML实现三级联动（详细版）（省市，城市，区县 ）
qq_44858151的博客
08-01 3337
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /*分析： * 1创建html检点 ...
聊聊如何使用Js写一个简单的二级联动和三级联动呢？
是个非常热爱生活、乐观、奋斗、努力的逗比青年
05-27 1911
js的二级联动和三级联动，有很多种写法，我这种写法只是多种写法中的一种，我个人认为是比较简洁的一种；上面的这些代码多练习几遍也就会写了，也不用死记硬背，理解就好了！实在怕忘记就一键三连吧！哈哈！
三级联动下拉列表的开发过程与范例
weixin_46038915的博客
04-26 2271
一、需求解析：
vue三级联动下拉菜单
dxn16638400024的博客
07-01 4265
给每个下拉菜单绑定一个change事件。当下拉菜单选项改变时，在组件中设置新数据，使得下级下拉菜单的选项随之改变。Vue.js是构建用户界面的渐进式框架，它可以轻松实现下拉菜单的三级联动。为绑定下拉菜单的选项，我们需要设计一个对应的数据结构。可以使用一个数组变量表示三级联动的选项。将设计好的数据绑定到菜单的选项中，并在组件的mounted钩子函数中初始化数据。在Vue组件中，设计一个select组件，它包含三个联动的下拉菜单。为了实现多级联动，我们可以使用递归的方法在组件中实现。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值