AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Spring Boot + Ajax前后端分离实现三级联动

2022-05-15 926
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Spring Boot + Ajax前后端分离实现三级联动

Spring Boot + Ajax前后端分离实现三级联动

引言

本项目为前后端分离的项目，前端采用Ajax技术，后端采用Spring Boot实现前后端分离，一个简单的案例，让你更加理解前后端分离的好处

需求描述

在静态页面写调用服务端接口，获取省、市、县区的数据

调用接口后显示在静态页面上，初始化时应该加载省份信息，当选择省份后，后面的加载出对应的市，选择市后，后面加载出对应的县区

当选中一个后，想切换另一个，需要将之前的选择数据清空再加载对应的数据

技术栈介绍：前端采用Ajax、Jquery、Bootstrap框架，后端采用SpringBoot

请求采用Ajax，后端皆为Post请求

效果图

在这里插入图片描述

数据表准备

t_province省份表

CREATE TABLE `t_county` (
  `id` int(255) DEFAULT NULL,
  `name` varchar(765) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `parent_id` int(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

t_city市区表

CREATE TABLE `t_city` (
  `id` varchar(16) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `name` varchar(32) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `parent_id` varchar(16) COLLATE utf8mb4_unicode_ci DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

t_county县区表

CREATE TABLE `t_county` (
  `id` int(255) DEFAULT NULL,
  `name` varchar(765) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `parent_id` int(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

==注意：由于数据过大，我会上传sql文件至百度网盘，需要的小伙伴可以在文末下载哦~==

项目结构

后端结构

在这里插入图片描述

前端为一个html页面，引用了Bootstrap框架

注意：文末有百度网盘项目源码

核心源码

前端核心

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<body>
    <div style="padding: 20px;">
        <label>
            行政地区：
        </label>
        <div class="form-inline">
            <div class="form-group">
                <select id="province" class="form-control">
                    <option value="">请选择省</option>
                </select>
            </div>
            <div class="form-group" >
                <select id="city" class="form-control" onchange="loadCounty()">
                    <option value="">请选择市</option>
                </select>
            </div>
            <div class="form-group">
                <select id="county" class="form-control">
                    <option value="">请选择县区</option>
                </select>
            </div>
        </div>
    </div>
</body>
</html>
<script src="js/jquery-3.6.0.js"></script>
<script>
    //初始化时加载此函数
    $(function () {
        //初始化时加载所有省份
        loadProvince();

        //当选择省份后加载所选择省份的市区
        $("#province").change(function () {
            let obj = $("#province").val();
            let url = "http://localhost:8345/springbootajax/ajax4/list_city";
            let data = JSON.stringify({parent_id:obj});
            $.ajax({
                url,
                data,
                type:'post',
                contentType : 'application/json;charset=utf-8',
                success(res) {
                    //删除之前选择的记录
                    $("option").remove('.op1');
                    res.data.map((obj) => {
                        $("#city").append("<option class='op1' value='"+obj.id+"'>"+obj.name+"</option>")
                    })
                }
            })
        });

        //当市区选择后加载选择市区的县区
        $("#city").change(function () {
            let obj = $("#city").val();
            let url = "http://localhost:8345/springbootajax/ajax4/list_county";
            let data = JSON.stringify({parent_id:obj});
            $.ajax({
                url,
                data,
                type:'post',
                contentType : 'application/json;charset=utf-8',
                success(res) {
                    console.log(res);
                    //删除之前选择的记录
                    $("#county option").remove('.op1');
                    res.data.map((obj) => {
                        $("#county").append("<option class='op1' value='"+obj.id+"'>"+obj.name+"</option>")
                    })
                }
            })
        })
    })

    //加载所有省份
    function loadProvince() {
        let url = "http://localhost:8345/springbootajax/ajax4/list_province";
        let data = {};
        $.post(url, data, function (res) {
            res.data.map((obj) => {
                $("#province").append("<option value='"+obj.id+"'>"+obj.name+"</option>");
            })
        }, 'json');
    }
</script>

后端核心

pom依赖文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.6.2</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.wanshi</groupId>
    <artifactId>test_springboot</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>test_springboot</name>
    <description>test_springboot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <exclusions>
                <exclusion>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-logging</artifactId>
                </exclusion>

            </exclusions>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-log4j</artifactId>
            <version>1.3.8.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-test</artifactId>
            <version>2.1.7.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
            <version>5.1.9.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
        </dependency>

        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.5</version>
        </dependency>


        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.20</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.2</version>
        </dependency>

        <dependency>
            <groupId>joda-time</groupId>
            <artifactId>joda-time</artifactId>
            <version>2.10.5</version>
        </dependency>

        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.11</version>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.9</version>
        </dependency>

        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>5.0.0</version>
        </dependency>

        <dependency>
            <groupId>com.googlecode.juniversalchardet</groupId>
            <artifactId>juniversalchardet</artifactId>
            <version>1.0.3</version>
        </dependency>


    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>

        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
            </resource>
            <resource>
                <directory>libs/</directory>
                <targetPath>libs</targetPath>
                <includes>
                    <include>**/*.jar</include>
                </includes>
            </resource>
        </resources>
    </build>

</project>

ResultBean统一返回风格类

package com.wanshi.bean;

public class ResultBean<C> {

    private Integer code;

    private String msg;

    private C data;


    private ResultBean(Integer code, String msg, C data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }

    public static ResultBean create(Integer code, String msg, Object data) {
        ResultBean res = new ResultBean(code, msg, data);
        return res;
    }

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public C getData() {
        return data;
    }

    public void setData(C data) {
        this.data = data;
    }
}

XingzhengMapper数据访问层

package com.wanshi.mapper;

import com.wanshi.bean.City;
import com.wanshi.bean.County;
import com.wanshi.bean.Province;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface XingzhengMapper {

    @Select("select * from t_province")
    List<Province> listProvince();

    @Select("select * from t_city where parent_id = #{parent_id}")
    List<City> listCity(City param);

    @Select("select * from t_county where parent_id = #{parent_id}")
    List<County> listCounty(County param);
}

XingzhengService核心业务类

package com.wanshi.service;

import com.wanshi.bean.City;
import com.wanshi.bean.County;
import com.wanshi.bean.Province;
import com.wanshi.bean.ResultBean;
import com.wanshi.mapper.XingzhengMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class XingzhengService {

    @Autowired
    private XingzhengMapper xingzhengMapper;

    public ResultBean<List<Province>> listProvince() {
        List<Province> provinceList = xingzhengMapper.listProvince();
        return ResultBean.create(0, "success", provinceList);
    }

    public ResultBean<List<City>> listCity(City param) {
        List<City> provinceCityList = xingzhengMapper.listCity(param);
        return ResultBean.create(0, "success", provinceCityList);
    }

    public ResultBean<List<County>> listCounty(County param) {
        List<County> cityCountyList = xingzhengMapper.listCounty(param);
        return ResultBean.create(0, "success", cityCountyList);
    }
}

XingzhengController访问层类

package com.wanshi.controller;

import com.wanshi.bean.City;
import com.wanshi.bean.County;
import com.wanshi.bean.Province;
import com.wanshi.bean.ResultBean;
import com.wanshi.service.XingzhengService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@CrossOrigin
@RestController
@RequestMapping("/ajax4")
public class XingzhengController {

    @Autowired
    private XingzhengService xingzhengService;

    @PostMapping("/list_province")
    public ResultBean<List<Province>> listProvince() {
        ResultBean<List<Province>> res = xingzhengService.listProvince();
        return res;
    }

    @PostMapping("/list_city")
    public ResultBean<List<City>> listCity(@RequestBody City param) {
        ResultBean<List<City>> res = xingzhengService.listCity(param);
        return res;
    }

    @PostMapping("/list_county")
    public ResultBean<List<County>> listCounty(@RequestBody County param) {
        ResultBean<List<County>> res = xingzhengService.listCounty(param);
        return res;
    }

}

SpringBootRunApplication主启动类

@EnableTransactionManagement
//扫描mapper层的包存入springioc容器
@MapperScan("com.wanshi.mapper")
@SpringBootApplication
public class TestSpringbootApplication {

    public static void main(String[] args) {
        SpringApplication.run(TestSpringbootApplication.class, args);
    }

}

结语

本项目为前后端分离的一个小项目，项目不难，逻辑稍微有点复杂，但也是简单的，通过本项目，相信你不断的练习，注入实战开发，你的开发能力会有一个质的飞跃，加油~

项目源码地址（百度网盘）：https://pan.baidu.com/s/1dal4kZxxlGt6CSwZd9NWGg 提取码: jrqu

文章标签：
Java
JavaScript
前端开发
SQL
Spring
关键词：
Spring boot
Spring前后端分离
Spring ajax
ajax三级联动
Spring Boot Ajax
Bug终结者
目录
相关文章
众所周知
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能，快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能，快速搭建前后端分离的应用框架。首先，确保开发环境已安装必要的工具，然后创建并配置 Spring Boot 项目，包括添加依赖和配置 Spring Security。接着，创建后端 API 和前端项目，配置动态路由和菜单。最后，运行项目并分享实践心得，包括版本兼容性、安全性、性能调优等方面。
众所周知
157 1
众所周知
|
25天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先，创建并配置 Spring Boot 项目，实现后端 API；然后，使用 Ant Design Pro Vue 创建前端项目，配置动态路由和菜单。通过具体案例，展示了如何快速搭建高效、易维护的项目框架。
众所周知
97 62
蓝易云
|
12天前
|
存储 运维 安全
Spring运维之boot项目多环境(yaml 多文件 proerties)及分组管理与开发控制
通过以上措施，可以保证Spring Boot项目的配置管理在专业水准上，并且易于维护和管理，符合搜索引擎收录标准。
蓝易云
24 2
东方睿赢
|
23天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架，实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架，实现动态路由和菜单功能。首先，确保开发环境已安装必要的工具，然后创建并配置 Spring Boot 项目，包括添加依赖和配置 Spring Security。接着，创建后端 API 和前端项目，配置动态路由和菜单。最后，运行项目并分享实践心得，帮助开发者提高开发效率和应用的可维护性。
东方睿赢
40 2
java冯坚持
|
1月前
|
SQL JSON Java
mybatis使用三：springboot整合mybatis，使用PageHelper 进行分页操作，并整合swagger2。使用正规的开发模式：定义统一的数据返回格式和请求模块
这篇文章介绍了如何在Spring Boot项目中整合MyBatis和PageHelper进行分页操作，并且集成Swagger2来生成API文档，同时定义了统一的数据返回格式和请求模块。
java冯坚持
56 1
mybatis使用三：springboot整合mybatis，使用PageHelper 进行分页操作，并整合swagger2。使用正规的开发模式：定义统一的数据返回格式和请求模块
东方睿赢
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用
【10月更文挑战第8天】本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先，通过 Spring Initializr 创建并配置 Spring Boot 项目，实现后端 API 和安全配置。接着，使用 Ant Design Pro Vue 脚手架创建前端项目，配置动态路由和菜单，并创建相应的页面组件。最后，通过具体实践心得，分享了版本兼容性、安全性、性能调优等注意事项，帮助读者快速搭建高效且易维护的应用框架。
东方睿赢
44 3
东方睿赢
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用
【10月更文挑战第7天】本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先，通过 Spring Initializr 创建 Spring Boot 项目并配置 Spring Security。接着，实现后端 API 以提供菜单数据。在前端部分，使用 Ant Design Pro Vue 脚手架创建项目，并配置动态路由和菜单。最后，启动前后端服务，实现高效、美观且功能强大的应用框架。
东方睿赢
45 2
刘大猫.
|
21天前
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
刘大猫.
34 0
浅色夏墨
|
Web App开发 JSON Java
Springboot+ajax传输json数组以及单条数据的方法
Springboot+ajax传输json数组以及单条数据的方法 下面是用ajax传输到后台单条以及多条数据的解析的Demo: 结构图如下: image 下面是相关的代码: pom.
浅色夏墨
2204 0
net936
|
2月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的服装商城管理系统
基于Java+Springboot+Vue开发的服装商城管理系统（前后端分离），这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能，同时锻炼他们的项目设计与开发能力。通过学习基于Java的服装商城管理系统项目，大学生可以在实践中学习和提升自己的能力，为以后的职业发展打下坚实基础。
net936
160 2
基于Java+Springboot+Vue开发的服装商城管理系统

热门文章

最新文章

  • 1
    15.4. Ajax + JSON
  • 2
    ajax省市县三级联动
  • 3
    jquery ajax return值 没有返回 的解决方法
  • 4
    最简单的Ajax
  • 5
    ASP.NET与JQUERY的AJAX文件上传 视频课件+源码Demo
  • 6
    Spring-boot+Dubbo应用启停源码分析
  • 7
    SpringMvc+Spring+MyBatis 基于注解整合
  • 8
    Spring装配Bean---使用xml配置
  • 9
    Ehcache 整合Spring 使用页面、对象缓存
  • 10
    在Spring中使用JDK定时器实现调度任务
  • 1
    【MongoDB 专栏】MongoDB 与 Spring Boot 的集成实践
    240
  • 2
    深入探索Spring Boot Web应用源码及实战应用
    95
  • 3
    ruoyi-nbcio从spring2.7.18升级springboot到3.1.7，java从java8升级到17（二）
    317
  • 4
    springboot数据库回滚失败原因
    49
  • 5
    springboot全局自定义异常
    39
  • 6
    springBoot+rabbit消息获取和消息确认
    121
  • 7
    RabbitMQ的springboot项目集成使用-01
    143
  • 8
    springboot集成ElasticSearch的具体操作（系统全文检索）
    87
  • 9
    Springboot 集成Rabbitmq之延时队列
    186
  • 10
    微信小程序和springboot实现微信支付
    234

    • 相关课程

    更多
  • 微服务框架 Spring Cloud 快速入门
  • Ajax 前端开发入门与实战
  • Java Web开发系列课程 - Spring框架入门
  • Spring Boot 2.5.x开发实战
  • Spring Cloud微服务架构设计与开发实战
  • Ajax入门

    • 相关电子书

    更多
  • 云栖社区特邀专家徐雷Java Spring Boot开发实战系列课程（第20讲）：经典面试题与阿里等名企内部招聘求职面试技巧
  • 微服务架构模式与原理Spring Cloud开发实战
  • 阿里特邀专家徐雷Java Spring Boot开发实战系列课程（第18讲）：制作Java Docker镜像与推送到DockerHub和阿里云Docker仓库

    • 相关实验场景

    更多
  • 从零搭建Spring Boot的Hello World
    • 下一篇
    无影云桌面