在Ajax GET之后从Flask服务器获取数据

时间:2014-02-28 16:36:31

标签: javascript jquery python ajax flask

我正在试验Flask和Ajax。在服务器端,我有一个非常简单的Web应用程序,它应该加倍并返回一个传递给它的数字,我在Flask网站上的例子中写道。这是Python代码:

from flask import Flask, request, jsonify

# Initialize the application

app = Flask(__name__)

# Route that receives and processes the Ajax request
@app.route('/')
def index():
    print 'In index()'
    data = request.args.get('data', 0, type=int) 
    print 'Received Ajax post - Data: ', data
    return jsonify(dict(results=str(data*2)))

# Main

if __name__ == '__main__':
    app.run(
            host = '0.0.0.0',
            port = int('8080'),
            debug = True # TODO: Disable debug mode after testing is complete
            )

在客户端,相关片段是:

$('#dataSubmitBtn').button().click(submitAdditionalData);

function submitAdditionalData() {
    var j = $.getJSON(
        'http://127.0.0.1:8080',
        {data: 15}, // Payload
        function(returnedData) { // Success function
            console.log('Data returned from server: ', returnedData.results);
        }
    ).done(function() {
        console.log('Successful execution');
    }).fail(function() {
        console.log('Error');
    }).always(function() {
        console.log('Complete');
    });
    return false;
}

当我运行这个Python类并打开我的网页时,会执行失败和始终执行的函数,但永远不会执行成功的函数。但是,如果我输入

http://127.0.0.1:8080/?data=30

在我的浏览器栏中,我得到了

{

    "results": "60"

}

这是我认为我应该期待的。是Javascript代码中的问题吗?在Python代码中?也许两者都是?

1 个答案:

答案 0 :(得分:1)

正如@SLaks所提到的,您尝试从其他域获取数据,Same Origin Policy (SOP)下不允许这样做,但使用JSONP允许这样做。

要使用JSONP,您需要在服务器端进行一些更改。以下是JSONP in Flask的示例。然后,在客户端,需要callback(由服务器端定义)参数。如果您使用的是jQuery.getJSON,请查看documentation here了解详情。