Question

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

我正在使用Flask-Appbuilder，并且有一个视图所有设置来显示模板，它工作正常。我将jQuery代码包含在模板中，并显示它应该是什么。

在Flask一侧，我创建了View，以及视图中的函数来呈现模板并在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

POST屏幕截图 - http://imgur.com/Ns1BEkE

Answer 1

您正在使用flask-appbuilder而syntax suggested是：

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>

这可能会干扰您的网址。

更详尽的解释：

GET请求尝试找到/_add_numbers?a=1&b=1网址，就您的后端而言，该网址与任何公开的网址都不匹配。
您应该尝试按如下方式定义公开的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.错误已在这些帖子中被引用和回答：

No 'Access-Control-Allow-Origin' header is present on the requested resource error

"No 'Access-Control-Allow-Origin' header is present on the requested resource"

烧瓶jquery GET 404

1 个答案: