json服务端简易实现

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>