Ajax怎样实现三级联动效果

小编给大家分享一下Ajax怎样实现三级联动效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

一、导入数据表和gson.jar

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

二、后端代码

由于每一级的数据都是根据上一级的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 selectMore(Integer pid);}

service

public interface AreaService {    List 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 areas = service.findCity(Integer.parseInt(pid));        String json = new Gson().toJson(areas);        resp.getWriter().print(json);    }}

三、前端代码

         
三级联动
    
            选择省份                选择城市                请选择区域    

以上是"Ajax怎样实现三级联动效果"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！