我在Flask中修改了以下示例代码https://tutorial101.blogspot.com/2021/01/python-flask-dynamic-loading-of.html，以使用SQlite数据库。www.example.com的目的app.py是显示汽车品牌的选项，然后按品牌显示可用的型号。py使用两个下拉框，用户可以从中进行选择。原始源代码是用Flask编写的，用于访问MySQL数据库。我修改了app.py的代码以使用SQlite db。
app.py运行良好。我可以想象两个下拉框的选项。当我选择一个汽车品牌时，应用程序会用可用的车型更新第二个下拉框。
当按下提交按钮时，我希望显示值 在两个选择中。具体地，哪个是所选择的汽车品牌，哪个是所选择的模型。
我已经在代码中包含了一条指令来显示汽车品牌的值，同时也显示了 与汽车型号相对应。但是，我无法找到一种方法来获得所选车型的价值。
我如何才能做到这一点？
谢谢
注：* 问题文本已编辑为更具体。问题的本质没有改变。*
我附上源代码和使用的模板。
app.py:
# flask sqlalchemy
from flask_sqlalchemy import SQLAlchemy
# app.py
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
app.config['SECRET_KEY'] = "caircocoders-ednalan"
# sqlite config
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///testingdb.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
# Bind the instance to the 'app.py' Flask application
db = SQLAlchemy(app)
class Carbrands(db.Model):
__tablename__ = 'carbrands'
brand_id = db.Column(db.Integer, primary_key = True)
brand_name = db.Column(db.String(250))
def __repr__(self):
return '\n brand_id: {0} brand_name: {1}'.format(self.brand_id, self.brand_name)
def __str__(self):
return '\n brand_id: {0} brand_name: {1}'.format(self.brand_id, self.brand_name)
class Carmodels(db.Model):
__tablename__ = 'carmodels'
model_id = db.Column(db.Integer, primary_key = True)
brand_id = db.Column(db.Integer)
car_models = db.Column(db.String(250))
def __repr__(self):
return '\n model_id: {0} brand_id: {1} car_models: {2}'.format(self.model_id, self.brand_id, self.car_models)
def __str__(self):
return '\n model_id: {0} brand_id: {1} car_models: {2}'.format(self.model_id, self.brand_id, self.car_models)
# index.html
@app.route('/', methods=["POST","GET"])
def index():
q = Carbrands.query.all()
print(q)
carbrands = q
return render_template('index.html', carbrands=carbrands)
# response.html
@app.route("/get_child_categories", methods=["POST","GET"])
def get_child_categories():
if request.method == 'POST':
parent_id = request.form['parent_id']
car = Carbrands.query.filter_by(brand_id=parent_id).first()
print("Car brand '{0}' parent_id '{1}'".format(car.brand_name, parent_id))
carmodels = Carmodels.query.filter_by(brand_id=parent_id).all()
print(carmodels)
return jsonify({'htmlresponse': render_template('response.html', carmodels=carmodels)})
if __name__ == "__main__":
app.run(debug=True)index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Python Flask Dynamic Loading of ComboBox using jQuery Ajax and SQlite</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#search_category_id').change(function(){
$.post("/get_child_categories", {
parent_id: $('#search_category_id').val()
}, function(response){
$('#show_sub_categories').html(response);
$('#show_sub_categories').append(response.htmlresponse);
});
return false;
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<h3 align="center">Python Flask Dynamic Loading of ComboBox using jQuery Ajax and SQlite</h3>
<form action="#" name="form" id="form" method="post">
<div class="form-group">
<label>Select Category</label>
<select name="search_category" id="search_category_id" class="form-control">
<option value="" selected="selected"></option>
{% for row in carbrands %}
<option value='{{row.brand_id}}'>{{row.brand_name}}</option>
{% endfor %}
</select>
</div>
<div id="show_sub_categories"></div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-lg-2"></div>
</div>
</div>
</body>
</html>response.html:
<div class="form-group">
<label>Select Sub Category</label>
<select name="sub_category" id="sub_category_id" class="form-control">
<option value="" selected="selected"></option>
{% for row in carmodels %}
<option value="{{row.model_id}}">{{row.car_models}}</option>
{% endfor %}
</select>
</div>
1条答案
按热度按时间epggiuax1#
我已经找到解决办法了。我附上了源代码作为参考，以防有人对解决方案感兴趣。这个问题意味着研究工作。
在截图中可以看到，显示了选择汽车品牌和选择汽车型号的选项。
当选择汽车品牌时，第二个下拉框显示与汽车品牌对应的车型列表。
当按下过程选择按钮时，应用程序显示指示已选择的汽车品牌和汽车型号的消息。
解决方案是实现对包含汽车品牌和型号的数据库表的阅读。这些信息被转换成一个python字典，以提供给两个下拉框。当选择汽车品牌时，应用程序在第二个下拉框中显示与该汽车品牌对应的汽车型号，参见：@app.route（'/update_dropdown'）
https://api.jquery.com/jquery.getjson/文档对解决方案至关重要。特别是$ .getJSON（'/ update_dropdown'，...以及$ .getJSON（'/_ process_data'，…Flask中很多关于下拉框动态更新的例子都是演示了下拉框是如何实现的，但是没有提到如何获取选中的数据;对继续这个过程很重要。在这种情况下，该解决方案包括在Flask中实现动态下拉框和处理所选值的所有细节。
在研究了可能的解决方案后，我发现了一个类似问题的链接。所以，我研究了解决方案，并根据我的需要进行了调整。我承认链接的作者：如何在不刷新页面的情况下在flask中创建链式selectfield？感谢你的宝贵贡献没有这种指导，就不可能成功地解决这个问题。
app.py:
index.html:
create_tables_and_data.sql：