Ajax实现三级联动的代码_F11 - 专业站长和开发者的学习网站

分享到

Ajax实现三级联动的代码

Ajax 来源：转载作者：秩名发布时间：2021-10-05 08:25:02 人浏览

摘要

一、导入数据表和gson.jar 该表包括了中国所有的

一、导入数据表和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<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>

您可能感兴趣的文章 :

原文链接 : https://blog.csdn.net/qq_42861526/article/details/120596017

Tag : Ajax(34)三级联动(5)

AJAX原理以及axios、fetch区别

AJAX原理 Ajax的原理简单来说是在用户和服务器之间加了个中间层(AJAX引擎)，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，
Ajax实现上传图像功能

最终效果展示 xhr发起请求 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
Ajax的疑难杂症介绍

跨域问题如图所示，这是通过jquery封装的ajax请求了一个本地的php文件（无框架），console提示CORS策略已阻止来自来源的null：请求的资源上不
前端实现滑动按钮AJAX与后端交互的代码

html代码 1 2 3 4 div class=switch-box input id=switchButton type=checkbox class=switch / label for=switchButton/label /div css代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1
AJAX实现省市县三级联动效果

（tips:其实省市县三级联动只需要引入jQuery省市县三级联动插件就可以实现）效果图首先准备两个服务端文件，另一个文件太长，这里就不
AJAX实现指定部分页面刷新效果的代码

需求：点击左边的选项，不需要整个页面刷新，只进行右边页面的刷新。这里需要三个文件 work.html !DOCTYPE htmlhtml lang=zh-CNhead meta charset=UTF
Ajax实现三级联动的代码

一、导入数据表和gson.jar 该表包括了中国所有的
AJAX实现注册验证用户名的代码

功能说明当用户在注册页面输入用户名并且鼠标焦点离开输入框时，到数据表中去验证该用户名是否已经存在，如果存在提示不可用，否则
react axios跨域访问一个或多个域名问题的详解

1.react + axios 跨域访问一个域名配置非常简单，只需要在当前的 package.json 文件里面配置： proxy:http://iot-demo-web-dev.autel.com, //当然，这里是一
$.ajax中contentType: “application/json” 的用法

具体内容如下所示： $.ajax({ type: httpMethod, cache:false, async:false, contentType: application/json; charset=utf-8, dataType: json,//返回值类型 url: path+url, data:j