2017-04-07 63 views
1

我在Flask中玩jQuery,並且一直在使用一個簡單的例子,我在runnable上找到了將兩個數字加起來的例子。flask jquery GET 404

我正在使用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) 

任何指導,將不勝感激。

GET截圖 - https://imgur.com/a/0rxiN

帖子截圖 - http://imgur.com/Ns1BEkE

+0

我從來沒有使用過FAB,但會懷疑'@ has_access'裝飾器會干擾某種方式。如果你刪除它,它會工作嗎? –

+0

當我點擊鏈接 –

+0

時,我刪除了它,並仍然在控制檯中具有相同的404。就像我說的,我不瞭解FAB。如果您只是試驗jQuery,那麼使用標準Flask路由和視圖可能會更容易。 –

回答

0

您正在使用的燒瓶的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 

這會導致URL看起來像這樣:http://<your_host>/myview/method1/<awaiting string param>

這可能會干擾您的網址。


有點更透徹的解釋:

GET請求嘗試找到其儘可能後端而言不符合任何暴露的URL /_add_numbers?a=1&b=1 URL。
你應該嘗試定義你暴露網址如下:

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

如果flask-appbuilder給你的問題,嘗試實驗默認瓶,看看是否適合你,然後用這些知識前進。


注:

通常,這是不是一個GETPOST請求。

您可以嘗試一個簡單的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.錯誤已被提到,並在這些職位徹底回答:

+0

當我更改爲POST時,則會在請求的資源上出現'No'Access-Control-Allow-Origin'標頭。「屏幕截圖 - http://imgur.com/a/cSehL –

+0

這裏是控制檯輸出爲GET - http://imgur.com/a/0rxiN –