如何在Flask中使用AJAX提交的数据？

Question

我在用jquery的ajax发送数据时遇到了麻烦。

$('#clickme').click( function() {
    var data = save_input(); // data

    data['_sid'] = $survey_id;  // survey_id injected from flask
    data['_uip'] = $user_ip; // user_ip injected from flask, request.remote_addr

    $.ajax({
        type : "POST",
        url : "{{ url_for('mod.load_ajax') }}",
        data: JSON.stringify(data),
        contentType: 'application/json;charset=UTF-8',
        success: function(result) {
            console.log(result);
        }
    });

    console.log(data);
});

从代码来看，data是一个像这样的javascript对象：

{
    'foo' : 'foo',
    'bar' : 'bar',
    'fo_' : 42,
}

我在flask中想做的是：

@mod.route('/load_ajax', methods=["GET", "POST"])
def load_ajax():
    if request.method == "POST":
        # load _sid and _uip from posted JSON and save other data
        # but request.form is empty.
        # >>> request.form
        # ImmutableMultiDict([]) 
        return str(request.form)

你看，ajax请求是发出了，但没有数据被提交。我在ajax中用console.log(data)来查看，发现data变量里确实有一些有用的数据。但是在ajax视图中，request.form是空的。我的数据到底去哪了呢？

Answer 1

在Flask这边，你可以使用：

data = request.get_json()

现在，变量data里有你通过ajax发送过来的字典数据，你可以用Python来处理这些数据。

Answer 2

根据你的例子，你并不是在发送一个键值对，而是把一个JSON字符串赋值给了jQuery的数据选项。正如评论中提到的，你需要把你的JSON转换成字符串，创建一个带有键的对象（这个键将用于从Flask中访问JSON字符串），然后把它赋值给jQuery的数据键。

    $.ajax({
            type : "POST",
            url : "{{ url_for('mod.load_ajax') }}",
            data: {json_str: JSON.stringify(data)},
            contentType: 'application/json;charset=UTF-8',
            success: function(result) {
                console.log(result);
            }
        });

    @mod.route('/load_ajax', methods=["GET", "POST"])
    def load_ajax():
        if request.method == "POST":
            # load _sid and _uip from posted JSON and save other data
            # but request.form is empty.
            # >>> request.form
            # ImmutableMultiDict([]) 
            return str(request.form['json_str']
     )

Answer 3

试试这个：

 $.ajax({
    type : "POST",
    url : "{{ url_for('mod.load_ajax') }}",
    data: JSON.stringify(data, null, '\t'),
    contentType: 'application/json;charset=UTF-8',
    success: function(result) {
        console.log(result);
    }
});

然后在服务器上，你可以这样引用数据里的变量：

request.json['foo']

因为内容类型被指定为 application/json，所以数据是在 request.json 里。