前端接受后端的數據並解析

后端

后端數據 數據庫取出的數據 是quset數據 需要轉變成字典

    def to_basic_dict(self):
        """將基本信息轉換為字典數據"""
        house_dict = {
            "house_id": self.id,
            "title": self.title,
            "price": self.price,
            "area_name": self.area.name,
            "img_url": constants.QINIU_URL_DOMAIN + self.index_image_url if self.index_image_url else "",
            "room_count": self.room_count,
            "order_count": self.order_count,
            "address": self.address,
            "user_avatar": constants.QINIU_URL_DOMAIN + self.user.avatar_url if self.user.avatar_url else "",
            "ctime": self.create_time.strftime("%Y-%m-%d")
        }
        return house_dict

@api.route('/look_over',methods=['GET'])
def look_over():
    area_dict_li = []
    a = House.query.all()
    for area in a:
        area_dict_li.append(area.to_basic_dict())
    return jsonify(errno=RET.OK, errmsg="OK", data=area_dict_li)

前端js

$(document).ready(function(){
    //向后端獲取城區信息    后端接口   
    $.get("/api/v1.0/areas",function (resp) {
        if(resp.errno=="0"){
            var areas = resp.data
            // 遍歷json 數據 按照id添加到對應地方
            // for(i=0;i<areas.length;i++){
            //     var area=areas[i];
            //     $("#area-id").append('<option value="'+area.aid+'">'+area.aname+'</option>');
            // }
            //使用js模板
            var html= template("areas-tmpl",{areas:areas});
            $("#area-id").html(html);
        }else{
            alert(resp.errmsg);
        }
    },"json")

前端html

<select class="form-control" id="area-id" name="area_id">

</select>
<!-- 定義模板-->
<script type="text/html" id="areas-tmpl">
{{each areas as area}}
<option value="{{area.aid}}">{{area.aname}}</option>
{{/each}}
</script>