省市县三级联动--原生Ajax

最新推荐文章于 2021-08-06 14:52:33 发布

予倾

最新推荐文章于 2021-08-06 14:52:33 发布

阅读量194

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/QZ9420/article/details/110354169

版权

ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

vscode:

在这里插入图片描述

index：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <h2>省市区三级联动</h2>
    <label for="">请选择省份：</label>
    <select id="province">
        <option value="">--省份--</option>
    </select>
    <select id="city">
        <option value="">--市区--</option>
    </select>
    <select id="country">
        <option value="">--区县--</option>
    </select>
    <script>
        let province = document.getElementById("province");
        let city = document.getElementById("city");
        let country = document.getElementById("country");
        //1)创建一个ajax对象
        let xhr = new XMLHttpRequest();
        //2)建立连接
        xhr.open("get", "/province")
        //设置头
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
        //3)发送请求
        xhr.send(null);
        //4)监听对象的变化
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                let res = xhr.responseText; //得到服务器响应的数据
                let provinces = JSON.parse(res);
                let str = `<option value="">--省份--</option>`
                provinces.forEach(item => {
                    str += `<option value="${item}">${item}</option>`
                });
                province.innerHTML = str;
            }
        }

        province.onchange = function () {
            xhr.open("get", "city?province=" + this.value);
            xhr.send(null);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    let res = xhr.responseText; //得到服务器响应的数据
                    let cities = JSON.parse(res);
                    let str = `<option value="">--市区--</option>`
                    cities.forEach(item => {
                        str += `<option value="${item}">${item}</option>`
                    });
                    city.innerHTML = str;
                }
            }
        }
        city.onchange = function () {
            xhr.open("get", "/country?city=" + this.value);
            xhr.send(null)
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    let res = xhr.responseText;
                    // console.log(res)
                    let countries = JSON.parse(res)
                    let str = '<option value="">--区县--</option>'
                    countries.forEach(item => {
                        str += `<option value="${item}">${item}</option>`
                    })
                    country.innerHTML = str;
                }
            }
        }
    </script>
</body>

</html>

JS:

let express = require("express");
let app = express();
let data = require("./cityData.min.json");
app.set("view engine","ejs");
app.set("views","./views");
app.get("/",(req,res)=>{
    res.render("index");
})

app.listen(3000,(req,res)=>{
    console.log("服务器在3000运行起来了")
})

app.get("/province",(req,res)=>{
    let provinces = [];
    data.forEach(item=>{
        provinces.push(item.n)
    })
    res.json(provinces);
})

app.get("/city",(req,res)=>{
    let province = req.query.province;
    let cities = []; // 用来装选择的省所对应的市
    data.forEach(item=>{
        if(item.n == province){
            item.s.forEach(item1=>{
                cities.push(item1.n)
            })
        }
    })
    res.json(cities)
})
app.get("/country",(req,res)=>{
    let city = req.query.city;
    let countries = [];
    data.forEach(item=>{
        item.s.forEach(item1=>{
            if(item1.n === city){
                item1.s && item1.s.forEach(item2=>{
                    countries.push(item2.n)
                })
            }
        })
    })
    res.json(countries)
})

cityData.min.json:

链接：
 https://pan.baidu.com/s/1zeFStAQCboWTQYAmwr5U_Q 提取码: kmr6 复制这段内容后打开百度网盘手机App，操作更方便哦
 提取码：
 kmr6

予倾

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
省市县三级联动--原生Ajax

vscode:index：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <h2>省市区三级联动</h2> <label for="">请选择省份：</label> &
复制链接

扫一扫