Jquery 如何在Flask中单击按钮时调用Ajax

我有一个场景，在网页中，我有4个按钮，点击后会调用单个表单。在相同的场景中，如果用户打开网站，那么它将呈现相应的模板。其中我有4个单选按钮和1个被dfault点击的按钮。在这些按钮上配置了Ajax调用，但默认情况下，在flask中不会调用这些按钮。我怎样才能做到这一点，你能提出建议吗

预期：当用户单击同一按钮时，我必须调用Ajax并呈现模板。 实际情况：只渲染模板而不调用ajax

Flask：：在下面的代码中，我并没有包括密钥和Flask应用程序- HTML:：

@app.route（“/”）
@app.route（'defaultform'）
def abc（）：
form=SampleForm（）
返回渲染模板（'/abc/xyz.html'，form=form）
类SampleForm（）：
用户_coice=RadioField（'radio_field'，选项=[（'abc'，'abc'），（'cde'，'cde'），（'xyz'，'xyz'）]，
默认值（'abc'））
api.add_资源（testapclass，“/testapi”）
$（文档）.ready（函数（）{
（#abc'）。在（'click'，function（）上{
$.ajax({
类型：'post'，
url:'testapi'，
成功：功能（数据）{
一些手术；
}
}
});
第二形式
@app.route('/')
@app.route('defaultform')
def abc():
    form = SampleForm()
    return render_template('/abc/xyz.html', form=form)

class SampleForm():
    user_coice = RadioField('radio_field', choices=[('abc','abc'), ('cde',cde'),('xyz','xyz')], 
                            default('abc'))

api.add_resource(testapiclass, '/testapi')

$(document).ready(function(){
    ('#abc').on('click',function(){
        $.ajax({
            type:'post',
            url : 'testapi',
            success:function(data){
            some_operation;
       }

   }
});
 <button class="btn" 
 onclick="window.location.href='{{url_for('defaultform') 
 }} >defaultform</button>
 <button class="btn" onclick="window.location.href='{{ 
 url_for('oneform') }} >oneform</button>
 <button class="btn" onclick="window.location.href='{{ 
 url_for('secondform')}} >secondform</button>
 <button class="btn" onclick="window.location.href='{{ 
 url_for('thirdform') }} >thirdform</button>