ajax实现二级联动

简介: 本文实例为大家分享了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>
相关文章
|
XML SQL 前端开发
JQuery Ajax实现三级联动
本文实例为大家分享了ajax实现三级联动的具体代码
JQuery Ajax实现三级联动
|
XML JSON 前端开发
如何理解Ajax与jQuery中的Ajax?
如何理解Ajax与jQuery中的Ajax?
119 0
|
数据采集 SQL 前端开发
【jquery Ajax 】form表单教学+评论案例
【jquery Ajax 】form表单教学+评论案例
161 0
【jquery Ajax 】form表单教学+评论案例
|
SQL 前端开发 JavaScript
【jquery Ajax 练习】图书管理
【jquery Ajax 练习】图书管理
175 0
【jquery Ajax 练习】图书管理
|
XML 开发框架 缓存
jQuery ajax - ajax()方法
jQuery ajax - ajax()方法
161 0
jQuery ajax - ajax()方法
|
前端开发
ajax无刷新删除
ajax无刷新删除
69 0
|
JavaScript 前端开发
Ajax-15:Jquery中的Ajax
Ajax-15:Jquery中的Ajax
138 0
|
JavaScript 前端开发 监控
原生JS的Ajax
转自:https://www.cnblogs.com/yufann/p/JS-Ajax.html 1.创建一个Ajax对象       非IE6浏览器:var obj = new XMLHttpReuqest();       IE6浏览器:var obj = new ActiveXbject("Microsoft.
749 0
|
Web App开发 JavaScript 前端开发