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

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

二、点我：切换二级联动

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 {@Autowiredprivate ProvinceMapper provinceMapper;@Overridepublic 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 {@Autowiredprivate CityMapper cityMapper;@Overridepublic 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{@Autowiredprivate CountyMapper countyMapper;@Overridepublic 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 {@Autowiredprivate ProvinceService provinceService;@Autowiredprivate CityService cityService;@Autowiredprivate CountyService countyService;@GetMapping("/list.do")public String add(){return "/WEB-INF/list.jsp";}@RequestMapping("/list_province.do")@ResponseBodypublic JsonResut list_province(){return provinceService.listProvince();}@RequestMapping("/list_city.do")@ResponseBodypublic JsonResut list_city(String parent_id){return cityService.listCity(parent_id);}@RequestMapping("/list_county.do")@ResponseBodypublic 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>

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

完整，详细的基于jquery省市三级联动和基于angular的省市三级联动对比
前几天遇到需要输入地址的一个项目,里面就会有全国各个省市县的选择. 对于全国省市县的选择,难点在于全国省市县的数据资源.而具体的操作并不是很难. 本来我想免费发送资源的,可是csdn,这最少也需要1积 ...
jquery实现省市区三级联动
jquery实现省市区三级联动最近项目需要用到关于省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例,却很难找到详细的省.市.区的具体数据(其实,用baidu搜索就是 ...
ajax省市联动案例,JQuery+Ajax制作省市联动
$(document).ready(function () { $("#Province").append("" + "--请选择--" + ...
html用ajax做三级联动,怎样使用JS+AJAX做出三级联动
这次给大家带来怎样使用JS+AJAX做出三级联动,使用JS+AJAX做出三级联动的注意事项有哪些,下面就是实战案例,一起来看一下. js 三级联动的实现代码如下所示: js原生ajax -请选择省/ ...
基于layui 2.*省市级三级联动
不bb,直接上代码,复制后替换layui.css和layui.js可直接使用 <!DOCTYPE html> <html> <head><meta chars ...
jquery省市县三级联动
Jquery省市县三级联动,数据来源js,无需调用接口可前往本人发布资源<Jquery省市县三级>免积分下载目录效果 html部分 <!DOCTYPE html> < ...
Ajax案例-三级联动-搜索框提示语
01ajax之三级联动案例分析 1.1简答题根据视频中的讲解,完成以下内容 1.1.1视频中的三级联动案例的功能需求是什么页面中有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框,选择省,则 ...
jquery ajax传递data,基于jquery ajax中的data传递参数与后台工作的流程
基于jquery ajax中的data传递参数与后台工作的流程 2014-11-12 分类: php学习,前端资源,学习jquery基础首先列出实例代码 js代码: $('button').c ...
基于jQuery的AJAX实现三级联动菜单
最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录. 下面是嵌套js的html文件: <!DOCTYPE html> <html ...

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

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

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

二、点我：切换二级联动

1、演示

2、前端代码

3、后端代码

3.1、实体类

3.1.1、省（Province）

3.1.2、市（City ）

3.1.3、区/县（County ）

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

3.2、接口层(Mapper)

3.2.1、省接口（ProvinceMapper）

3.2.2、市接口（CityMapper ）

3.2.3、区/县接口（CountyMapper ）

3.3、接口层（Service）

3.3.1、省接口(ProvinceService ）

3.3.2、市接口(CityService ）

3.3.3、区/县接口(CountyService ）

3.4、实现类(ServiceImpl)

4.4.1、省（ProvinceServiceImpl ）

4.4.2、市（CityServiceImpl ）

4.4.3、区/县（CountyServiceImpl ）

3.5、控制层（Controller）

4、xml文件

4.1、mapper.xml

4.1.1、ProvinceMapper.xml（省）

4.1.2、CityMapper.xml（市）

4.1.3、CountyMapper.xml（区/县）

4.2、Pom.xml(依赖jar)

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

最新文章

热门文章