flask方面的，省市级连操作的原生、jquery版ajax代码_flask实现省市二级联下拉菜单-优快云博客

本文链接：https://blog.youkuaiyun.com/yangxiaoping7/article/details/84111746

本文介绍了如何在Flask应用中使用AJAX技术实现省市级联的效果。通过@app.route装饰器定义了获取省份和城市的数据接口，利用jQuery AJAX进行异步请求，实现动态加载。示例代码包括了数据库模型、数据插入以及使用原生和jQuery版本的AJAX调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生ajax中异步值为true时表示其他可以同时进行
A的工作完毕之后B再开始工作
把A改为同步就行了，B就需要等A做完了，B才能开始工作
作业代码：
如何做到省市级连的操作
html代码：

Title

使用AJAX技术完成的省市级联

服务端代码：创建数据库： class Province(db.Model): #不写tablename也自动为全小写 __tablename__="province" id=db.Column(db.Integer,primary_key=True) proName=db.Column(db.String(80),nullable=False,unique=True) # 增加关联属性以及反向引用属性 # Wife.teacher中就一个对象 city = db.relationship('City', backref='province', lazy='dynamic') def __init__(self,proName): self.proName = proName

def to_dict(self):
    dic={
        'id':self.id,
        'proName':self.proName
    }
    return dic

class City(db.Model):
tablename=“city”
id = db.Column(db.Integer, primary_key=True)
cityName=db.Column(db.String(80),nullable=False,unique=True)
pid=db.Column(db.Integer,db.ForeignKey(‘province.id’))

def to_dict(self):
    dic={
        'id':self.id,
        'cityName':self.cityName,
        'pid':self.pid
    }
    return dic

插入数据的代码：
@app.route(’/01-insert’)
#省：这是创建对象插入数据库
def insert_views():
province1 = Province(‘黑龙江’)
province2 = Province(‘吉林’)
province3 = Province(‘辽宁’)
db.session.add(province1)
db.session.add(province2)
db.session.add(province3)
return “Insert Success”

@app.route(’/02-insert’)
#市：这是创建对象插入数据库
def insert2_views():
city1 = City()
city2 = City()
city3 = City()
city4 = City()
city1.cityName=“沈阳”
city2.cityName=“大连”
city3.cityName=“鞍山”
city4.cityName=“抚顺”
province1=Province.query.filter_by(id=3).first()
city1.province=province1
city2.province=province1
city3.province=province1
city4.province=province1
db.session.add(city1)
db.session.add(city2)
db.session.add(city3)
db.session.add(city4)
逻辑代码：
#老师代码------------------------------
@app.route(’/01-province’)
def province1():
provinces=Province.query.all()
list=[]
for pro in provinces:
list.append(pro.to_dict())
return json.dumps(list)

@app.route(’/01-city’)
def city():
pid = request.args.get(‘pid’)
cities=City.query.filter_by(pid=pid).all()
list=[]
for c in cities:
list.append(c.to_dict())
return json.dumps(list)

jquery版ajax代码：
修改省市级连操作将原生ajax改成jquery版的ajax

<script>
    function loadPro() {
        /*使用$.ajax()完成同步请求*/
        $.ajax({
            url:"/01-province",
            type:"get",
            async:false,//同步
            dataType:"json",
            success:function (data) {
                var html="";
                $.each(data,function (i,obj) {
                    html+="<option value='"+obj.id+"'>";
                    html+=obj.proName;
                    html+="</option>"
                });
                $("#selPro").html(html);
            }
        });
    }
    function loadCity(pid) {
        $.ajax({
            url:"/01-city",
            type:"get",
            data:"pid="+pid,
            dataType:"json",
            success:function (data) {
                var html="";
                $.each(data,function (i,obj) {
                    html+="<option value='"+obj.id+"'>";
                    html+=obj.cityName;
                    html+="</option>";
                });
                $("#selCity").html(html);
            }
        });
    }
    $(function () {
        //加载所有省份
        loadPro();
        //加载对应省份的所有城市

        loadCity($("#selPro").val());

        //为selPro绑定change事件
        $("#selPro").change(function () {
            loadCity(this.value);
        });

    });
</script>