欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Ajax实现三级联动效果

程序员文章站 2022-06-10 08:26:30
本文实例为大家分享了ajax实现三级联动效果的具体代码,供大家参考,具体内容如下一、导入数据表和gson.jar该表包括了中国所有的省、市、县、区,它们之间通过parentid关联。二、后端代码由于每...

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

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

相关标签: Ajax 三级联动