orm模型中声明一个方法,可以将实例化后对象的数据转换为字典表格式
class Product_Detail(db.Model):
"""声明产品明细表"""
__tablename__='T_S_Product_Detail'
id=db.Column(db.Integer,primary_key=True)
color=db.Column(db.String(100))
length=db.Column(db.Integer)
productNameId=db.Column(db.Integer,db.ForeignKey('T_S_Product.id')) ##采用T_S_Product的id
operator=db.Column(db.String(100))
operateTime = db.Column(db.DateTime)
def __init__(self,length=None,color=None):
self.length=length
self.color=color
def to_json(self):
"""将每个产品明细以字典表形式展现"""
return dict(id=self.id,color=self.color,length=self.length,productnameid=self.productNameId,operator=self.operator,operatetime=self.operateTime)
添加视图,jsonify 将字典表转换为json格式,需要从flask中导入
class ProductDetailJson(MethodView):
"""查找产品明细的接口"""
def post(self):
productname=request.form.get('productname')
productdetails=db.session.query(Product_Detail).filter(Product_Detail.productNameId==productname).all()
return jsonify([p.to_json() for p in productdetails]) ##前台获取的值为option中value的值,通过productNameId查找
init文件中添加url规则
stock_manager.add_url_rule('/productdetailjson/',view_func=ProductDetailJson.as_view('productdetailjson'))
前台js实现网页载入时根据产品名称加载对应产品明细规格,以及切换产品名称时动态读取产品名称下的产品明细
<script>
$(document).ready( function () {
var pt={
productname:$("#productname").val(), ##获取产品名称下拉框的值
};
console.log(pt); ##控制台打印
$.ajax({
"url":"/productdetailjson/",
"type":"post",
"data":pt,
"dataType":"json",
"success": function (response) {
$.each(response,function(i,productdetail){
$('#format').append('<option value="'+productdetail.id+'">'+productdetail.color+' '+productdetail.length+'</option>'); ##如果请求成功,遍历响应,每遍历一次添加一个option
});
}
});
$("#productname").change( function () {
var pt={
productname:$("#productname").val(),
};
$.ajax({
"url":"/productdetailjson/",
"type":"post",
"data":pt,
"dataType":"json",
"success": function (response) {
$("#format").empty(); ##先清空select,再遍历响应添加option
$.each(response,function(i,productdetail){
$('#format').append('<option value="'+productdetail.id+'">'+productdetail.color+' '+productdetail.length+'</option>');
});
}
});
});
});
</script>