flask使用ajax进行访问数据库异步加载下拉框

#flask中使用ajax异步加载下拉框
公司科室的网站在记录零件问题记录的时候，需要使用到车型和零件名称的参数，者两个参数存在一对多关系，同时公司会不断增加后续车型的情况，为了可以同步数据库，方便公司的现场员工选择零件，故使用ajax同步数据库来加载下拉框。
##app中路由

@app.route('/register_quality/', methods=['GET', 'POST'])
@login_required
def register_quality():
    if request.method == "GET":
        return render_template("regist_quatily.html")
    else:
        register = User.query.filter(User.id == session.get('user_id')).first()
        product_line = request.form.get("product_line")
        by_class = request.form.get("by_class")
        chexing = request.form.get("chexing")
        product_name = request.form.get("product_name")
        pic = request.files.get('pic_url')
        file_dir = config.basedir + '/pic/quanlity_question_pic/'
        if not os.path.exists(file_dir):
            os.makedirs(file_dir)
        if pic and allowed_file(pic.filename):

            ext = pic.filename.rsplit('.', 1)[1]
            new_filename = Pic_str().create_uuid() + '.' + ext
            pic_save_path = os.path.join(file_dir, new_filename)
            pic.save(pic_save_path)
        else:
            return "图片上传失败"
    Production_quantity = request.form.get("Production_quantity")
    Dir_ok_quantity = request.form.get("Directly_qualified_products_quantity")
    Selected_quantity = request.form.get("Selected_qualified_products_quantity")
    Quick_quantity = request.form.get("Quick_handling_product_quantity")
    IandF_quantity = request.form.get("Initial_and_final_quantity")
    product_record=Product_Record(register=register,product_line=product_line,by_class=by_class,chexing=chexing,product_name=product_name,pic_url=pic_save_path,Production_quantity=Production_quantity,Dir_ok_quantity=Dir_ok_quantity,Selected_quantity=Selected_quantity,Quick_quantity=Quick_quantity,IandF_quantity=IandF_quantity)
    db.session.add(product_record)

    first_bad_type = request.form.get("first_bad_type")
    first_bad_type_stop_time = request.form.get("first_bad_type_stop_time")
    first_bad_type_quantity = request.form.get("first_bad_type_quantity")
    second_bad_type = request.form.get("second_bad_type")
    second_bad_type_stop_time = request.form.get("second_bad_type_stop_time")
    second_bad_type_quantity = request.form.get("second_bad_type_quantity")
    third_bad_type = request.form.get("third_bad_type")
    third_bad_type_stop_time = request.form.get("third_bad_type_stop_time")
    third_bad_type_quantity = request.form.get("third_bad_type_quantity")
    fourth_bad_type = request.form.get("fourth_bad_type")
    fourth_bad_type_stop_time = request.form.get("fourth_bad_type_stop_time")
    fourth_bad_type_quantity = request.form.get("fourth_bad_type_quantity")
    if first_bad_type!=""and first_bad_type_quantity!=""and first_bad_type_stop_time!="":
        question1= Quality_question_record(question_type=first_bad_type,question_stop_time=first_bad_type_stop_time,question_quantity=first_bad_type_quantity)
        question1.p_id.append(product_record.id)
        db.session.add(question1)
    if second_bad_type != "" and second_bad_type_quantity != "" and second_bad_type_stop_time != "":
        question2= Quality_question_record(question_type=second_bad_type, question_stop_time=second_bad_type_stop_time,
                                question_quantity=second_bad_type_quantity)
        question2.p_id.append(product_record.id)
        db.session.add(question2)
    if third_bad_type_quantity != "" and third_bad_type_quantity != "" and third_bad_type_stop_time != "":
        question3= Quality_question_record(question_type=third_bad_type, question_stop_time=third_bad_type_stop_time,
                                question_quantity=third_bad_type_quantity)
        question3.p_id.append(product_record.id)
        db.session.add(question3)
    if fourth_bad_type != "" and fourth_bad_type_quantity != "" and fourth_bad_type_stop_time != "":
        question4= Quality_question_record(question_type=fourth_bad_type, question_stop_time=fourth_bad_type_stop_time,
                                question_quantity=fourth_bad_type_quantity)
        db.session.add(question4)
        question4.p_id.append(product_record.id)
    db.session.commit()
    print(first_bad_type_quantity,second_bad_type,third_bad_type_quantity,fourth_bad_type,fourth_bad_type_quantity,fourth_bad_type_stop_time)
    return {}


@app.route('/changeselectfield/', methods=['GET', 'POST'])
def changeselectfield():
    if request.method == "POST":
        data = request.get_json()
        print(data)
        name = data['name']
        products = Product.query.filter(Product.chexing == name).all()
        products = [p.product_name for p in products]
        print(products)
        return jsonify(products)
    else:
        return {}

其中有两个路由，使用ajax进行请求时为了避免同一个路由下进行post请求，故我这边使用了第二个路由进行处理ajax提交的post请求。
##前端html代码

<td width="67" rowspan="4">
                        <select name="chexing" id="chexing"
                                onchange="changefield('chexing','/changeselectfield/')">
                            <option id="A30-2">A30-2</option>
                            <option id="A30-1">A30-1</option>
                            <option id="A7M">A7M</option>
                            <option id="A06">A06</option>
                        </select>
                    </td>
                    <td width="90" rowspan="4">
                        <select name="product_name" id="product_name" required>
                            <option>A30-2后地板</option>
                            <option>A30-2中地板</option>
                            <option>A30-2右侧围</option>
                            <option>A30-2左侧围</option>
                            <option>A30-2顶盖（普通）</option>
                            <option>A30-2顶盖（全景）</option>
                            <option>A30-2左后门外板</option>
                            <option>A30-2左后门内板</option>
                            <option>A30-2右后门内板</option>
                            <option>A30-2右后门内板</option>
                        </select>

这里是两个下拉框，其中第一个下拉框我是指定了相应的选项内容，而第二个下拉框只是初始了A30-2的选项（等下就会明白），其他车型的并没有相应的增加。
前端显示的结果为：

##数据库结构

class Product(db.Model):
    __tablename__ = "product"
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    chexing = db.Column(db.String(100),nullable=False)
    product_name = db.Column(db.String(100), nullable=False)
    def __repr__(self):
        return "%s" % self.product_name

这里提前在数据库当中插入相应的车型零件配置表，如下图片

##ajax异步提交：

 <script>
            function changefield(choose, url) {
                var data;
                var select = document.getElementById(choose);
                $(product_name).html(""); //每次重新选择当前列表框，就清空下一级列表框。
                for (i = 0; i < select.length; i++) {
                    if (select[i].selected) { //判断被选中项
                        Name = select[i].text;
                        data = {
                            "name": Name
                        };
                        $.post({ //发起ajax请求
                            url: url,
                            type: "POST",
                            data: JSON.stringify(data),
                            {#dataType:'json'#}
                            contentType: "application/json; charset=UTF-8",
                            success: function (data) {
                                {#console.log(data.length);#}
                                if (data) {
                                    for (i = 0; i < data.length; i++) {
                                        $("<option >" + data[i] + "</option>").appendTo(product_name);
                                    }
                                }else {
                                    alert('error')
                                }
                            }
                        });
                    }
                }
            }
        </script>

这个异步提交的代码是参考如下链接的：https://blog.csdn.net/qq_38787214/article/details/86319271
文章中的ajax代码我稍微修改了一下，因为源代码中是3个参数的，我尝试了多次还是没能成功，所以我将原来代码中的第二个参数去掉，在返回的sucess的id直接填写html中的select下拉框的的ID，这样就成功了。
此前说到为什么需要初始化第二个下拉框的选项，因为如果不初始化的话，页面中的的第一个下拉框不存在变化的时候，第二个下拉框也没有从数据库当中读取数据的，为了避免这种情况的发生，我提前在前端优先加载了A30-2的零件选项，接着如果第一个下拉框发生变化的时候，就会触发ajax函数，通过第二路路由返回的数据，动态加载到零件名称的下拉框中，这样达到第一个下拉框和第二个下拉框的级联联动。
最后效果如图：