Ajax二级下拉联动

最新推荐文章于 2021-08-05 15:31:28 发布

jiuyueblog

最新推荐文章于 2021-08-05 15:31:28 发布

阅读量1.4k

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/qq_37745470/article/details/88804768

版权

Ajax 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

Ajax二级下拉联动

昨天学习入门了Ajax,利用Ajax从后台取到一些数据信息，以及从前台提交一下数据到后台，没有明显的体会到Ajax的局部刷新，异步请求，觉得还不过瘾，所以今天学习Ajax二级下拉联动,体会一下不刷新页面，给观众带来的"智能"。

一般我们在填自己的信息的时候，我们要填自己的地址，首先选择省份、再选城市、选区、等等，有没有发现，我们在选完省份的时候，会自动根据选的省份给出我们下步要选的城市、等你选好了城市、城市的各个区也自动供你选择。这是怎么做到的呢？其实就是通过AJAX来完成的。

这里我们不使用数据库，直接就是SpringBoot+Ajax。

我们知道AJAX与服务器之间的交互常用的传输载体格式有三种：

HTML
XML
JSON

省份与城市是有层级关系的，因此我们只能用XML或者JSON。SpringBoot项目使用JSON也很方便(实际项目使用json的也比较多，很少用xml了)。

前台分析

当用户选择了某个省份之后，是使用Ajax与服务器进行交互，那么在选择好省份之后，就出现对应的城市信息。

监听下拉框变化事件
只要下拉框变化就与服务器交互
得到服务器返回的json数据
把数据填到城市的下拉框列表中

后台分析

得到前台选中的省份信息，以json的格式返回相应的城市信息。

前端代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>多级联动</title>
    <link th:href="@{/bootstrap3/css/bootstrap.css}" rel="stylesheet" type="text/css">
</head>
<body>

    <select id="province" name="province">
        <option value="-1">请选择省份</option>
        <option>广东</option>
        <option>湖南</option>
    </select>
    <select id="city" name="city">
        <option>请选择城市</option>
    </select>

</body>
<script type="text/javascript" src="webjars/jquery/2.2.4/jquery.min.js"></script>
<!--<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>-->
<script th:src="@{/bootstrap3/js/bootstrap.js}"></script>
<script>
    document.getElementById("province").onclick= function () {
        //定位到下拉列表,获取下拉框的值
        var index = this.selectedIndex;
        //获取下拉框值
        var province = this.options[index].innerHTML;
        //如果下拉框的值为"请选择省份",不让访问服务器
        if (province!="请选择省份"){
            //由于每次都会自动添加，因此每次在调用的时候清楚
            var citySelect = document.getElementById("city");
            //每次将option变成长度为 1,让其显示'请选择城市'
            citySelect.options.length = 1;
            $.ajax({
                type:"POST",
                dataType:"json",
                url:"/getCitys",
                data:{"province":province},
                success:function (data) {

                    var result = JSON.stringify(data);//将返回的json数据转换成String
                    //得到每个城市的值
                   // alert(result);
                    for (var i=0;i<data.length;i++){
                        var city = data[i].name;
                        //动态创建option控件
                        var option = document.createElement("option");
                        //给<option> value 赋值
                        option.innerHTML = city;
                        //appendChild()方法向节点添加一个子节点,就出现后面的下拉选项
                        // 比如广东的后面一次添加广州、深圳、中山
                        citySelect.appendChild(option);
                    }
                }
            });
        }
    }
</script>
</html>

后台代码：

@Controller
public class SelctctCityController {
    @GetMapping("/selectCity")
    public String selectCity(){
        return "selectCity";
    }

    List<City> cities;

    @RequestMapping("/getCitys")
    @ResponseBody
    public List<City> getCitys(HttpServletRequest request){
        cities = new ArrayList<>();
        String province = request.getParameter("province");
        System.out.println("province="+province);
        if ("广东".equals(province)){
            City city1 = new City("广州");
            City city2 = new City("深圳");
            City city3 = new City("中山");
            cities.add(city1);
            cities.add(city2);
            cities.add(city3);
        }else if ("湖南".equals(province)) {
            City city1 = new City("长沙");
            City city2 = new City("岳阳");
            City city3 = new City("湘潭");
            cities.add(city1);
            cities.add(city2);
            cities.add(city3);
        }
        System.out.println(cities);
        return cities;
    }
}

jiuyueblog

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Ajax二级下拉联动

Ajax二级下拉联动昨天学习入门了Ajax,利用Ajax从后台取到一些数据信息，以及从前台提交一下数据到后台，没有明显的体会到Ajax的局部刷新，异步请求，觉得还不过瘾，所以今天学习Ajax二级下拉联动,体会一下不刷新页面，给观众带来的"智能"。一般我们在填自己的信息的时候，我们要填自己的地址，首先选择省份、再选城市、选区、等等，有没有发现，我们在选完省份的时候，会自动根据选的省份给出...
复制链接

扫一扫