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 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 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更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
php类自动加载器实现方法
2015/07/28 PHP
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
Ext 表单布局实例代码
2009/04/30 Javascript
javascript定义函数的方法
2010/12/06 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
python类装饰器用法实例
2015/06/04 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
Django实现单用户登录的方法示例
2019/03/28 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
python生成特定分布数的实例
2019/12/05 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
戴森美国官网:Dyson美国
2016/09/11 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
副护士长竞聘演讲稿
2014/04/30 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
员工培训协议书
2014/09/15 职场文书
2014年节能工作总结
2014/12/18 职场文书
六年级小学生评语
2014/12/26 职场文书
戒赌保证书
2015/05/11 职场文书
英语演讲开场白
2015/05/29 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python