使用 jquery 和烧瓶发送数组数据答案

【问题标题】：Sending array data with jquery and flask使用 jquery 和烧瓶发送数组数据
【发布时间】：2014-07-16 08:20:54
【问题描述】：

我需要将数据从 html 页面发送回我的 Python 应用程序：

$.post("/test", {x: [1.0,2.0,3.0], y: [2.0, 3.0, 1.0]}, function(dat) {console.log(dat);});

在服务器上：

@app.route('/test', methods=['POST'])
def test():
    print request.form.keys()
    print dir(request.form)
    print request.form["x[]"]
    return jsonify({"Mean": 10.0})

令我惊讶的是，钥匙是

['y[]', 'x[]']

和

print request.form["x[]"]

结果为 1。

这样做的正确方法是什么？

【问题讨论】：

标签： jquery flask

【解决方案1】：

你可以使用烧瓶功能request.args.getlist('apps[]') 从传递给服务器的 js 对象中获取列表

var filter={}
 filter.startDate=$('#quant1').val(); 
 filter.endDate=$('#quant2').val(); 
 var checkedItems = [], counter = 0;
    $("#appNamesSelector div.active").each(function(idx, li) {
        checkedItems[counter] = $(li).text();
        counter++;
    });
filter.apps=checkedItems;
console.log($.param(filter));
    $.ajax({ type: "GET",   
 url: "/drilldown",
 data : filter  
});

Image shows how the array is passed into the server.

【讨论】：

【解决方案2】：

当发送包含数组或对象值的 POST 数据时，jQuery 遵循PHP convention of adding brackets to the field names。它不是一个 Web 标准，但因为 PHP 开箱即用地支持它，所以它很受欢迎。

因此，正如您所发现的，在 Flask 端使用列表处理 POST 数据的正确方法确实是在字段名称后附加方括号。您可以使用MultiDict.getlist() 检索列表的所有值：

request.form.getlist("x[]")

（request.form 是一个 MultiDict 对象）。这将返回 字符串，而不是数字。如果您知道这些值是数字，您可以告诉getlist() 方法为您转换它们：

request.form.getlist("x[]", type=float)

如果您不希望应用额外的括号，请不要使用数组作为值，或者将您的数据编码为 JSON。不过，您必须改用jQuery.ajax()：

$.ajax({
    url: "/test",
    type: "POST",
    data: JSON.stringify({x: [1.0,2.0,3.0], y: [2.0, 3.0, 1.0]}),
    contentType: "application/json; charset=utf-8",
    success: function(dat) { console.log(dat); }
});

在服务器端，使用request.get_json()解析发布的数据：

data = request.get_json()
x = data['x']

这还负责处理数据类型转换；您将浮点数发布为 JSON，Flask 将在 Python 端再次将它们解码回浮点值。

【讨论】：

您还可以在 $.ajax 上将“traditional”参数设置为 true，以使 jquery 使用旧式序列化。