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 相关文章推荐
起点页面传值js,有空研究学习下
Jan 25 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
tracking.js实现前端人脸识别功能
Apr 16 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 Javascript
VueX模块的具体使用(小白教程)
Jun 05 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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
php单件模式结合命令链模式使用说明
2008/09/07 PHP
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
php设计模式 Facade(外观模式)
2011/06/26 PHP
php重定向的三种方法分享
2012/02/22 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
php实现复制移动文件的方法
2015/07/29 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
Vue实现可移动水平时间轴
2020/06/29 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
Python制作Windows系统服务
2017/03/25 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
如何利用python进行时间序列分析
2020/08/04 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
初中政治教学反思
2014/01/17 职场文书
公司总经理岗位职责
2014/03/15 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
使用javascript解析二维码的三种方式
2021/11/11 Javascript
Python实现归一化算法详情
2022/03/18 Python