具有完整 ajax 烧瓶实现的按钮完全没有做任何事情答案

【问题标题】：Button with full ajax flask implementation doing absolutely nothing具有完整 ajax 烧瓶实现的按钮完全没有做任何事情
【发布时间】：2019-10-21 01:35:22
【问题描述】：

我正在尝试在我的烧瓶应用上使用自定义搜索栏。我没有设法将它与表单（或flask-wtform）相关联并保留它的动画。因此我选择实现 ajax，我也很想看到使用烧瓶。我的问题是，无论我做什么，按钮都完全没有任何作用！

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 模板的脚本，扩展基本模板块的功能使其工作。但是我对此感到困惑，脚本不应该在渲染中幸存吗？

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

这是脚本和flask的当前代码：

【问题讨论】：

您好，首先我会提议修复您的路线，将 @main.route('/buscar/', methods=['GET', 'POST']) 更改为 @main.route('/buscar', methods=['GET', 'POST'])，因为 url 规则后不应有反斜杠。
@simkus 改变了它没有效果。但是，我决定将脚本包含在 jinja2 标记中，这样就可以正常工作。（检查编辑）我有点困惑呵呵
也许你正在使用flask-bootstrap库？因为这是这个库与烧瓶 jinja2 变量一起工作的方式，正如我在他们的文档中所理解的那样 pythonhosted.org/Flask-Bootstrap/…

标签： javascript ajax python-3.x forms flask

【解决方案1】：

看来flask对Ajax的兼容性不好，需要改用json来处理Ajax请求。在中型到大型应用程序模型中使用 sqlalchemy 是一种痛苦。我的方法是使用 marshmallow ORM 将 sqlalchemy 对象直接映射到 json 对应对象。将应用程序变成经典 flask-wtf 和 api rest 的混合体。我必须澄清一下，我以时间为主要因素进行了重构，优先考虑的是速度而不是性能。

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

但是，在任何情况下，我都没有设法让烧瓶正确响应 Ajax 的变量。使用烧瓶会话暂时解决了这个问题，这很有效。

【讨论】：