jQuery案例：ajax获取txt文本内容并实现三级联动

最新推荐文章于 2023-04-28 09:58:11 发布

袁成新（Chauncey Yuan）

最新推荐文章于 2023-04-28 09:58:11 发布

阅读量362

点赞数

分类专栏： jQuery案例文章标签： javascript jquery html

本文链接：https://blog.csdn.net/weixin_43666825/article/details/104781632

版权

jQuery案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

ajax作为唯二的前后端数据传输的方式之一，触发方式多样，同时也是异步的，基本上是取代了传统的form表单提交数据的方式。
以下基于jQuery和ajax实现了一个小案例：

文件结构

├── js
├── txt
	├── cities.txt
└── index.html

其中txt文件（cities.txt）大致如下图，是将中国三级联动城市数据的json文件直接做成txt文本：
具体可参照我的博客JavaScript：省、市、县三级联动案例
在这里插入图片描述

html部分

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
</head>

<body>
    <select id="provinces" name=""></select>
    <select id="cities" name=""></select>
    <select id="counties" name=""></select>
</body>

JavaScript部分（jQuery）

$(() => {
    $.ajax({
        type: "POST",
        url: "txt/cities.txt",
        data: {
            t: (new Date().getTime()),
        },
        success: function(data) {
            show(JSON.parse(data));
        },
        error: function(xhr) {
            console.log(xhr.status);
        }
    })
})

function show(cityData) {
    var province = $("#provinces").html("<option>-请选择-</option>"); // 省级下拉框的jQuery对象，并初始化
    var city = $("#cities").html("<option>-请选择-</option>"); // 地级市下拉框的jQuery对象，并初始化
    var county = $("#counties").html("<option>-请选择-</option>"); // 县级下拉框的jQuery对象，并初始化

    cityData.forEach((item, index) => { //遍历全部数据，主要添加全国省级数据
        province.append(new Option(item.text, index.value)); // 添加省级数据
    });

    province.change(function() { // 省级下拉框的change事件绑定
        city.html("<option>-请选择-</option>"); // 初始化地级市下拉框
        county.html("<option>-请选择-</option>"); // 初始化县级下拉框

        cityData[this.selectedIndex - 1].children.forEach((item, index) => { // 遍历当前省的下属地级市数据
            city.append(new Option(item.text, index.value)); // 添加地级市数据
        });

        city.change(function() { // 地级市下拉框的change事件绑定
            county.html("<option>-请选择-</option>"); // 初始化县级下拉框

            cityData[province.get(0).selectedIndex - 1].children[this.selectedIndex - 1].children.forEach((item, index) => { // 遍历当前地级市的下属县级数据
                county.append(new Option(item.text, index.value)); //添加县级数据
            });
        })
    })
}