如何通过Flask GET接口向JQuery返回数据并加载联动下拉框

核心问题分析 #

1. 后端：SQLAlchemy模型无法直接序列化
   查询返回的sub_cat_data是SQLAlchemy模型实例列表，jsonify无法直接序列化这类对象，会导致返回失败或数据异常。
2. 前端：回调参数与逻辑错误
   • 回调函数中误用未定义的data变量，实际参数是sub_cat_data
   • 指定dataType: 'json'后无需再用JSON.parse()解析数据
   • 循环生成选项时逻辑错误，会重复添加已生成的内容

修正后的后端代码 #

from flask import jsonify, request
# 假设你的subcategories模型定义如下（需确保模型有对应字段）
class subcategories(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    categoryID = db.Column(db.Integer)
    subcategory_name = db.Column(db.String(100))

    # 添加方法将模型实例转为字典
    def to_dict(self):
        return {
            'id': self.id,
            'subcategory_name': self.subcategory_name,
            'categoryID': self.categoryID
        }

@app.route('/loadsubcat', methods=['GET'])
def loadsubcat():
    sub_cat = request.args.get('category_id')
    # 查询子分类数据
    sub_cat_data = subcategories.query.filter(subcategories.categoryID == sub_cat).all()
    # 将模型实例列表转为字典列表
    sub_data_list = [item.to_dict() for item in sub_cat_data]
    # 返回JSON格式数据
    return jsonify(sub_data_list)

修正后的前端jQuery代码 #

<script type="text/javascript">
  $("#parent_cat").change(function() {
    var cat_id = $(this).val();
    $.ajax({
      type: 'GET',
      url: "/loadsubcat",
      data: { category_id: cat_id },
      dataType: 'json',
      success: function(sub_cat_data){
        // 清空子分类下拉框
        $("#sub_cat").empty();
        // 添加默认提示选项（可选）
        $("#sub_cat").append("<option value=''>请选择子分类</option>");
        // 遍历返回的子分类数据，生成选项
        $.each(sub_cat_data, function(index, item){
          var option = "<option value='"+item.id+"'>"+item.subcategory_name+"</option>";
          $("#sub_cat").append(option);
        });
      },
      error: function(xhr, status, error){
        // 错误处理，方便调试
        console.log("请求失败：" + error);
      }
    });
  });
</script>

关键说明 #

• 后端通过模型的to_dict()方法将实例转为字典，确保jsonify能正常序列化
• 前端移除了多余的contentType: 'application/json'（GET请求无需设置，数据通过URL参数传递）
• 修正了回调函数中的变量名错误，直接使用sub_cat_data遍历
• 添加错误处理函数，便于排查请求失败问题

内容的提问来源于stack exchange，提问作者Roy