1

我在 Flask 中使用 jQuery，并且一直在使用我在runnable上找到 的将两个数字相加的简单示例。

我正在使用 Flask-Appbuilder 并查看所有设置以显示模板，效果很好。我将 jQuery 代码包含在模板中，它会显示它应该显示的内容。

在 Flask 方面，我创建了视图，以及视图中用于呈现模板和接收 jQuery GET 请求中的变量的函数。

当我单击模板上的 jQuery 链接将两个数字相加时，我在 python控制台中看到 404 错误。

[07/Apr/2017 09:48:53] "GET /_add_numbers?a=1&b=1 HTTP/1.1" 404 -

这是我的模板中的内容：

{% extends "appbuilder/base.html" %}

{% block content %}
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
          rel="stylesheet">
  <script type=text/javascript>
    $(function() {
      $('a#calculate').bind('click', function() {
        $.getJSON('/_add_numbers', {
          a: $('input[name="a"]').val(),
          b: $('input[name="b"]').val()
        }, function(data) {
          $("#result").text(data.result);
        });
        return false;
      });
    });
  </script>

  <body>
    <div class="container">
      <div class="header">
        <h3 class="text-muted">How To Manage JSON Requests</h3>
      </div>
      <hr/>
      <div>
      <p>
    <input type="text" size="5" name="a"> +
    <input type="text" size="5" name="b"> =
    <span id="result">?</span>
    <p><a href="javascript:void();" id="calculate">calculate server side</a>
      </form>
      </div>
    </div>
  </body>
</html>
{% endblock %}

我的烧瓶视图如下所示：

class MyView(BaseView):
    default_view = 'sale'

    @expose('/sale', methods=['GET'])
    @has_access
    def sale(self):
        return self.render_template('sale.html')

    @expose('/_add_numbers', methods=['GET', 'POST'])
    @has_access
    def add_numbers(self):
        a = request.args.get('a', 0, type=int)
        b = request.args.get('b', 0, type=int)
        return jsonify(result=a + b)

任何指导将不胜感激。

获取屏幕截图 - https://imgur.com/a/0rxiN

发布截图 - http://imgur.com/Ns1BEkE

4

1 回答 1

0

您正在使用 flask-appbuilder 并且建议的语法是： 

class MyView(BaseView):
    route_base = "/myview"

    @expose('/method1/<string:param1>')
    def method1(self, param1):
        # do something with param1
        # and return it
        return param1

这导致一个如下所示的网址：http://<your_host>/myview/method1/<awaiting string param>

这可能是干扰您的 URL 的原因。

更彻底的解释：

GET 请求尝试查找/_add_numbers?a=1&b=1就您的后端而言与任何公开的 URL 不匹配的 URL。
您应该尝试如下定义暴露的 URL：

@expose('/_add_numbers?<int:a>&<int:b>', methods=['GET', 'POST'])

如果flask-appbuilder给您带来问题，请尝试使用默认烧瓶进行试验，看看它是否适合您，然后根据这些知识继续前进。

笔记：

通常这不是GET而是POST请求。

您可以尝试一个简单的jquery $.post()调用，而不是getJSON：

$.post('http://localhost:5000/_add_numbers',{
    a: $('input[name="a"]').val(),
    b: $('input[name="b"]').val()
}, function(data) {
    $("#result").text(data.result);
});

No 'Access-Control-Allow-Origin' header is present on the requested resource.在这些帖子中已经提到并彻底回答了该错误：

于 2017-04-07T08:30:24.137 回答