一、本文实例为大家分享了ajax实现二级联动的具体代码，供大家参考(复制下来就可以用)
1.演示（gif）
2.数据表
CREATE TABLE `rikao_erjiliandong_category` (
`category_id` int(11) NOT NULL AUTO_INCREMENT,
`category_name` varchar(32) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`pid` int(11) DEFAULT NULL,
PRIMARY KEY (`category_id`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
3.前端代码
<%@ 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="caidanId" onchange="caidan()">
<option>请选择</option>
</select>
<select id="shangpinId">
<option value="-1">请选择</option>
</select>
</body>
</html>
<script src="${APP_PATH}/js/jquery-3.6.0.js"></script>
<script type="text/javascript">
let urlpath = "http://localhost:8080/rikao_erjiliandong/ajax/listCategoryPost.do";
$.post(urlpath,'',function (ret){
for (let i in ret.data) {
let p = ret.data[i];
$('#caidanId').append('<option value="'+p.category_id+'">'+p.category_name+'</option>');
}
},'json');
function caidan(){
let url = "http://localhost:8080/rikao_erjiliandong/ajax/listCategoryIdPost.do";
let caidanval = {"pid":$('#caidanId').val()};
$.get(url,caidanval,function (ret){
$('#shangpinId').html('<option value="-1" selected>请选择</option>');
for (let i in ret.data) {
let p = ret.data[i];
$('#shangpinId').append('<option value="'+p.pid+'">'+p.category_name+'</option>');
}
},'json');
};
</script>
4.后端代码
4.1.实体类
4.1.1.种类（Category）
package com.wanshi.spring.entity;
import lombok.Data;
@Data
public class Category {
private String category_id;
private String category_name;
private String pid;
}
4.1.2.Ajxa必备提示返回值类（JsonResut）
package com.wanshi.spring.entity;
import lombok.Data;
@Data
public class JsonResut {
private Integer code;
private String msg;
private Object data;
}
4.2.接口层(Mapper)
4.2.1.种类接口（CategoryMapper）
package com.wanshi.spring.mapper;
import com.wanshi.spring.entity.Category;
import java.util.List;
public interface CategoryMapper {
List<Category> listCategory();
List<Category> listCategorId(String pid);
}
4.3.接口层（Service）
4.3.1.种类接口(CategoryService）
package com.wanshi.spring.service;
import com.wanshi.spring.entity.JsonResut;
public interface CategoryService {
JsonResut listCategory();
JsonResut listCategorId(String pid);
}
4.4.实现类(ServiceImpl)
4.4.1.种类（CategoryServiceImpl）
package com.wanshi.spring.service.impl;
import com.wanshi.spring.entity.Category;
import com.wanshi.spring.entity.JsonResut;
import com.wanshi.spring.mapper.CategoryMapper;
import com.wanshi.spring.service.CategoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class CategoryServiceImpl implements CategoryService {
@Autowired
private CategoryMapper categoryMapper;
@Override
public JsonResut listCategory() {
JsonResut json = new JsonResut();
List<Category> listCategory = categoryMapper.listCategory();
json.setData(listCategory);
return json;
}
@Override
public JsonResut listCategorId(String pid) {
JsonResut json = new JsonResut();
List<Category> listCategoryId = categoryMapper.listCategorId(pid);
json.setData(listCategoryId);
return json;
}
}
4.5、控制层（Controller）
package com.wanshi.controller;
import com.wanshi.spring.entity.JsonResut;
import com.wanshi.spring.service.CategoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
@Controller
@RequestMapping("/ajax")
@CrossOrigin
public class AjaxController {
@Autowired
private CategoryService categoryService;
@RequestMapping("/listCategory.do")
public String listCategory(){
return "/WEB-INF/list.jsp";
}
@RequestMapping("/listCategoryPost.do")
@ResponseBody
public JsonResut listCategoryPost(){
return categoryService.listCategory();
}
@RequestMapping("/listCategoryIdPost.do")
@ResponseBody
public JsonResut listCategoryIdPost(String pid){
return categoryService.listCategorId(pid);
}
}
5.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.CategoryMapper">
<select id="listCategory" resultType="com.wanshi.spring.entity.Category">
select * from rikao_erjiliandong_category where pid is null
</select>
<select id="listCategorId" resultType="com.wanshi.spring.entity.Category" parameterType="String">
select * from rikao_erjiliandong_category where pid = #{pid}
</select>
</mapper>
