ajax实现二级联动

2023-01-13 111

版权

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

简介： 本文实例为大家分享了ajax实现二级联动

一、本文实例为大家分享了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>