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

JQuery Ajax实现三级联动

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

本文实例为大家分享了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>
文章标签：
Java
JavaScript
前端开发
SQL
数据格式
XML
关键词：
jQuery ajax
ajax jquery
jQuery三级联动
ajax三级联动
ajax.js jQuery
SuperProgMan.SYJ
目录
相关文章
天玄TX
|
6月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
天玄TX
68 0
杨校
|
5月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校
45 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
dufadayang
|
1月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
dufadayang
82 1
听白
|
2月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
听白
32 1
杀死一只知更鸟debug
|
2月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总，dom操作，ajax请求
本文汇总了jQuery的一些常用操作，包括DOM元素的选择、添加、移除，表单操作，以及如何使用jQuery发送Ajax请求，涵盖了GET、POST请求和文件上传等常见场景。
杀死一只知更鸟debug
25 2
听白
|
2月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
听白
21 1
Yaiba123
|
3月前
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码，包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面（单文件上传和多文件上传加表单内容）以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
Yaiba123
158 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
乐多_L
|
3月前
|
XML JSON 前端开发
AJAX是什么？原生语法格式？jQuery提供分装好的AJAX有什么区别？
AJAX是什么？原生语法格式？jQuery提供分装好的AJAX有什么区别？
乐多_L
32 0
热爱技术的小郑
|
3月前
|
JavaScript 前端开发
Ajax的使用（jquery的下载）
这篇文章是关于Ajax学习笔记的分享，包括JQuery的下载方式、Ajax的主要参数说明，以及如何在网页中使用Ajax进行异步请求的示例代码。
热爱技术的小郑
32 0
今天是几号
|
5月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
今天是几号
51 5