Ajax实现三级联动效果


Posted in Javascript onOctober 05, 2021

本文实例为大家分享了Ajax实现三级联动效果的具体代码,供大家参考,具体内容如下

一、导入数据表和gson.jar

该表包括了中国所有的省、市、县、区,它们之间通过parentid关联。

Ajax实现三级联动效果

二、后端代码

由于每一级的数据都是根据上一级的id查询而来,逻辑十分相似,故我们只需要一个接口就可以完成三级甚至更多级的联动,在这个案例中我们的核心查询就是select * from area where parentid=#{pid}

entity

package com.codeXie.entity;

import java.io.Serializable;

public class Area implements Serializable {
    private String areaid;
    private String areaname;
    private String parentid;
    private Integer arealevel;
    private Integer status;

    public Area() {
    }

    public Area(String areaid, String areaname, String parentid, Integer arealevel, Integer status) {
        this.areaid = areaid;
        this.areaname = areaname;
        this.parentid = parentid;
        this.arealevel = arealevel;
        this.status = status;
    }
    .......省略了对各属性的set、get
}

mapper

public interface AreaMapper {
    @Select("select * from area where parentid=#{pid}")
    List<Area> selectMore(Integer pid);
}

service

public interface AreaService {
    List<Area> findCity(int pid);
}

servlet

@WebServlet("/AreaServlet")
public class AreaServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        String pid = req.getParameter("pid");
        AreaServiceImpl service = new AreaServiceImpl();
        List<Area> areas = service.findCity(Integer.parseInt(pid));
        String json = new Gson().toJson(areas);
        resp.getWriter().print(json);
    }
}

三、前端代码

<script src="js/jquery.js"></script>
    <script>
        function produceOption(id,list){
            console.log(list)
            $(id).empty()
            $(list).each((index,item)=>{
                $(id).append("<option value="+item.areaid+">"+item.areaname+"</option>")
            })
            
        }
        $(()=>{
            $.ajax({
                url:"AreaServlet",
                method:"post",
                data:{pid:0},
                dataType:"json",
                success: function(res) {
                   produceOption("#proviance",res)
                   $("#proviance").prepend("<option selected='selected'>请选择省份</option>")
                }
            })
            $("#proviance").change(function(){
                var pid = $(this).prop("value")
                $.ajax({
                url:"AreaServlet",
                method:"post",
                data:{pid:pid},
                dataType:"json",
                success: function(res) {
                   produceOption("#city",res)
                   $("#city").prepend("<option selected='selected'>请选择城市</option>")
                }
            })
        })
        $("#city").on("change",function(){
            var pid = $(this).prop("value")
                $.ajax({
                url:"AreaServlet",
                method:"post",
                data:{pid:pid},
                dataType:"json",
                success: function(res) {
                   produceOption("#country",res)
                   
                }
            })
        })
    })
    </script>
</head>
<body>
    <h2>三级联动</h2>
    <hr/>
    <select name="pro" id="proviance">
        <option>选择省份</option>
    </select>
    <select name="city" id="city">
        <option>选择城市</option>
    </select>
    <select name="country" id="country">
        <option>请选择区域</option>
    </select>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
JQuery学习总结【二】
Dec 01 Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 Javascript
微信小程序实现签字功能
Dec 23 Javascript
微信小程序实现下拉加载更多商品
Dec 29 Javascript
5种 JavaScript 方式实现数组扁平化
Oct 05 #Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 #Javascript
Javascript设计模式之原型模式详细
JS数组方法some、every和find的使用详情
8个JS的reduce使用实例和reduce操作方式
Oct 05 #Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 #Javascript
JavaScript实现简单拖拽效果
Sep 15 #Javascript
You might like
PHP Array交叉表实现代码
2010/08/05 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
Python调用.NET库的方法步骤
2019/12/27 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
大学学习计划书范文
2014/05/02 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
在职员工证明书
2014/09/19 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
使用python求解迷宫问题的三种实现方法
2022/03/17 Python
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS