具有完整ajax flask实现的按钮绝对不起作用

Question

我正在尝试在我的烧瓶应用程序中使用自定义搜索栏。我没有设法将其关联到表单（或flask-wtform）并保留其动画。因此，我选择实现Ajax，但我也非常感兴趣地看到使用flask。 我的问题是，无论我做什么，按钮绝对不起作用！

HTML

{% block header %}
<div class="py-5 bg-image-full bgpic1">
  <img class="logotipo img-fluid d-block mx-auto" src="/static/img/cerveweb_inverted.png">
  <div class="searchBox">
    <input id="txtBusqueda" class="searchInput" type="text" placeholder="Buscar">
    <button id="btnBusqueda" class="searchButton">
      <i class="fas fa-search"></i>
    </button>
  </div>
</div>
{% endblock %}

JavaScript

<script type="text/JavaScript">
  function buscar(){
    alert("2");
    var texto = $("#txtBusqueda").val();
    $.ajax({
      url: "{{url_for('buscar')}}",
      type: 'POST',
      data: {'data':texto},
      contentType: 'application/json;charset=UTF-8'      
    });
  };

  $("#btnBusqueda").click(function(){
    console.log("1");
    buscar();
  });  
</script>

烧瓶

@main.route('/buscar', methods=['GET', 'POST'])
def buscar():
    # Viene de un AJAX
    if request.method == "POST":
        texto = request.json['data']
        flash("Has buscado: {}".format(texto), "info")
    return render_template('index.html')

编辑： 封闭Jinja模板的脚本，扩展基本模板块的功能使其可以工作。但是我对此感到困惑，脚本不应该阻止渲染吗？

此外，由于某种原因，现在指出这是一个错误的请求：

这是脚本和烧瓶的当前代码

Answer 1

似乎flask与Ajax没有很好的兼容性，您必须切换到json以处理Ajax请求。使用sqlalchemy来搜索中型到大型应用程序模型是很痛苦的。我的方法是使用棉花糖ORM将sqlalchemy对象直接映射到json对应对象。将应用程序转换为经典的flask-wtf和api rest的混合物。 我必须澄清的是，我将时间作为主要因素进行了重构，将速度优先于性能。

有一些非常优雅的解决方案，不需要这种混合，但我无法停止深入分析它们。他们只是无法与我所需的非常少量的额外代码行竞争。 （每个模型类大约3个，调用它大约2个）

但是，在任何情况下，我都没有设法使flask正确响应变量给Ajax。此问题已使用flask会话临时修复，工作非常顺利。