基于JQuery Ajax实现三级联动获取SpringMVC接口的数据(详细一套)

SuperProgMan.SYJ

已于 2022-11-08 18:12:46 修改

阅读量914

点赞数 21

分类专栏： SpringMvc Ajax 文章标签： jquery ajax 前端

于 2021-12-26 17:02:07 首次发布

本文链接：https://blog.csdn.net/m0_55400356/article/details/122033778

版权

SpringMvc 同时被 2 个专栏收录

7 篇文章 3 订阅

订阅专栏

Ajax

2 篇文章 0 订阅

订阅专栏

本文实例为大家分享了ajax实现三级联动的具体代码，供大家参考(复制下来就可以用)

一、省市县数据表可见：全国各、省、市区/县sql语句

二、点我：切换二级联动

在静态页面写调用服务端接口，获取省、市、县区的数据
省份的接口： /ajax4/list_province.do ，获取所有省份的数据
市的接口：/ajax4/list_city.do ，必须传输 parent_id 参数，返回某个省下的所有市的数据
县区的接口： /ajax4/list_county.do ，必须传输 parent_id 参数，返回某个市下的所有县区的数据
注意：Controller层所有接口必须以 @PostMapping注解，即只允许Post方式请求。

1、演示

在这里插入图片描述

2、前端代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <%
        request.setAttribute("APP_PATH",request.getContextPath());
    %>
    <title>三级联动</title>
</head>
<body>
    <select id="shengId" onchange="sheng()">
        <option>请选择省</option>
    </select>
    <select id="shiId" onchange="shi()">
        <option  value="-1">请选择市</option>
    </select>
    <select id="quId">
        <option  value="-1">请选择区</option>
    </select>

</body>
</html>
<script src="${APP_PATH}/js/jquery-3.6.0.js"></script>
<script type="text/javascript">
    $.post('http://localhost:8080/sanjiliandong/ajax4/list_province.do','',function (ret){
        for (let i in ret.data) {
            $('#shengId').append('<option value="'+ret.data[i].id+'">'+ret.data[i].name+'</option>');
        }
    },'json');

    function sheng(){
        let provinceval = {"parent_id":$('#shengId').val()};
        $.get('http://localhost:8080/sanjiliandong/ajax4/list_city.do',provinceval,function (ret){
            $('#shiId').html('<option value="-1" selected>请选择市份</option>');
            for (let i in ret.data) {
                $('#shiId').append('<option value="'+ret.data[i].id+'">'+ret.data[i].name+'</option>');
            }
        },'json');
    };

    function shi(){
        let cityval = {"parent_id":$('#shiId').val()};
        $.get('http://localhost:8080/sanjiliandong/ajax4/list_county.do',cityval,function (ret){
            $('#quId').html('<option value="-1" selected>请选择区份</option>');
            for (let i in ret.data) {
                $('#quId').append('<option value="'+ret.data[i].id+'">'+ret.data[i].name+'</option>');
            }
        },'json');
    };

</script>

3、后端代码

3.1、实体类

3.1.1、省（Province）

package com.wanshi.spring.entity;

import lombok.Data;

@Data
public class Province {
   private String id;
   private String name;
}

3.1.2、市（City ）

package com.wanshi.spring.entity;

import lombok.Data;

@Data
public class City {
    private String id;
    private String name;
    private String parent_id;
}

3.1.3、区/县（County ）

package com.wanshi.spring.entity;

import lombok.Data;

@Data
public class County {
    private String id;
    private String name;
    private String parent_id;

}

3.1.4、Ajxa必备提示返回值类（JsonResut）

package com.wanshi.spring.entity;

import lombok.Data;

@Data
public class JsonResut {
    private Integer code;
    private  String msg;
    private  Object data;
}

3.2、接口层(Mapper)

3.2.1、省接口（ProvinceMapper）

package com.wanshi.spring.mapper;

import com.wanshi.spring.entity.Province;

import java.util.List;

public interface ProvinceMapper {
    List<Province> listProvince();
}

3.2.2、市接口（CityMapper ）

package com.wanshi.spring.mapper;

import com.wanshi.spring.entity.City;
import com.wanshi.spring.entity.Province;

import java.util.List;

public interface CityMapper {
    List<City> listCity(String id);
}

3.2.3、区/县接口（CountyMapper ）

package com.wanshi.spring.mapper;

import com.wanshi.spring.entity.County;
import com.wanshi.spring.entity.Province;

import java.util.List;

public interface CountyMapper {
    List<County> listCounty(String id);
}

3.3、接口层（Service）

3.3.1、省接口(ProvinceService ）

package com.wanshi.spring.service;

import com.wanshi.spring.entity.JsonResut;
import com.wanshi.spring.entity.Province;

import java.util.List;

public interface ProvinceService {
    JsonResut listProvince();
}

3.3.2、市接口(CityService ）

package com.wanshi.spring.service;

import com.wanshi.spring.entity.JsonResut;

public interface CityService {
    JsonResut listCity(String id);
}

3.3.3、区/县接口(CountyService ）

package com.wanshi.spring.service;

import com.wanshi.spring.entity.JsonResut;

public interface CountyService {
    JsonResut listCounty(String id);
}

3.4、实现类(ServiceImpl)

4.4.1、省（ProvinceServiceImpl ）

package com.wanshi.spring.service.impl;

import com.wanshi.spring.entity.JsonResut;
import com.wanshi.spring.entity.Province;
import com.wanshi.spring.mapper.ProvinceMapper;
import com.wanshi.spring.service.ProvinceService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ProvinceServiceImpl implements ProvinceService {
    @Autowired
    private ProvinceMapper provinceMapper;

    @Override
    public JsonResut listProvince() {
        JsonResut json = new JsonResut();
      List<Province> listProvince =  provinceMapper.listProvince();
        if(listProvince != null){
            json.setCode(0);
            json.setMsg("展示成功");
            json.setData(listProvince);
            return json;
        }
        json.setCode(1);
        json.setMsg("没有数据");
        return json;
    }


}

4.4.2、市（CityServiceImpl ）

package com.wanshi.spring.service.impl;

import com.wanshi.spring.entity.City;
import com.wanshi.spring.entity.JsonResut;
import com.wanshi.spring.mapper.CityMapper;
import com.wanshi.spring.service.CityService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class CityServiceImpl implements CityService {
    @Autowired
    private CityMapper cityMapper;
    @Override
    public JsonResut listCity(String id) {
        JsonResut jsonResut = new JsonResut();
        List<City> listCity = cityMapper.listCity(id);
        if(listCity != null){
            jsonResut.setCode(0);
            jsonResut.setMsg("展示成功");
            jsonResut.setData(listCity);
            return jsonResut;
        }
        jsonResut.setCode(1);
        jsonResut.setMsg("没有数据");
        return jsonResut;
    }
}

4.4.3、区/县（CountyServiceImpl ）

package com.wanshi.spring.service.impl;

import com.wanshi.spring.entity.City;
import com.wanshi.spring.entity.County;
import com.wanshi.spring.entity.JsonResut;
import com.wanshi.spring.mapper.CountyMapper;
import com.wanshi.spring.service.CountyService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class CountyServiceImpl implements CountyService{
    @Autowired
    private CountyMapper countyMapper;
    @Override
    public JsonResut listCounty(String id) {
        JsonResut jsonResut = new JsonResut();
        List<County> listCounty = countyMapper.listCounty(id);
        if(listCounty != null){
            jsonResut.setCode(0);
            jsonResut.setMsg("展示成功");
            jsonResut.setData(listCounty);
            return jsonResut;
        }
        jsonResut.setCode(1);
        jsonResut.setMsg("没有数据");
        return jsonResut;
    }
}

3.5、控制层（Controller）

package com.wanshi.controller;
import com.wanshi.spring.entity.JsonResut;
import com.wanshi.spring.service.CityService;
import com.wanshi.spring.service.CountyService;
import com.wanshi.spring.service.ProvinceService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

@Controller
@RequestMapping("/ajax4")
@CrossOrigin
public class AjaxController {
    @Autowired
    private ProvinceService provinceService;
    @Autowired
    private CityService cityService;
    @Autowired
    private CountyService countyService;
    @GetMapping("/list.do")
    public String add(){
        return "/WEB-INF/list.jsp";
    }

    @RequestMapping("/list_province.do")
    @ResponseBody
    public JsonResut list_province(){
        return provinceService.listProvince();
    }

    @RequestMapping("/list_city.do")
    @ResponseBody
    public JsonResut list_city(String parent_id){
        return cityService.listCity(parent_id);
    }

    @RequestMapping("/list_county.do")
    @ResponseBody
    public JsonResut list_county(String parent_id){
        return countyService.listCounty(parent_id);
    }
}

4、xml文件

4.1、mapper.xml

4.1.1、ProvinceMapper.xml（省）

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.wanshi.spring.mapper.ProvinceMapper">
    <select id="listProvince"  resultType="com.wanshi.spring.entity.Province">
        select * from t_province
    </select>
</mapper>

4.1.2、CityMapper.xml（市）

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.wanshi.spring.mapper.CityMapper">
    <select id="listCity"  resultType="com.wanshi.spring.entity.City">
        select * from t_city
        <where>
            parent_id = #{id}
        </where>
    </select>
</mapper>

4.1.3、CountyMapper.xml（区/县）

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.wanshi.spring.mapper.CountyMapper">
    <select id="listCounty"  resultType="com.wanshi.spring.entity.County">
        select * from t_county
        <where>
            parent_id = #{id}
        </where>
    </select>
</mapper>

4.2、Pom.xml(依赖jar)

<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.wanshi</groupId>
    <artifactId>sanjiliandong</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.7</maven.compiler.source>
        <maven.compiler.target>1.7</maven.compiler.target>
    </properties>

    <dependencies>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.13.2</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.49</version>
        </dependency>

        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.2.8</version>
        </dependency>

        <dependency>
            <groupId>cglib</groupId>
            <artifactId>cglib</artifactId>
            <version>3.3.0</version>
        </dependency>

        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>1.2.2</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.1.9.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>5.1.9.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.0.14</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aop</artifactId>
            <version>4.3.12.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjweaver</artifactId>
            <version>1.9.2</version>
        </dependency>

        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.4</version>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.0</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.9.0</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.9.0</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
            </plugin>
        </plugins>
    </build>
</project>