使用 AJAX 将 JSON 数据传递到 Flask 服务器? [复制]

Posted

技术标签:

【中文标题】使用 AJAX 将 JSON 数据传递到 Flask 服务器? [复制]【英文标题】:Passing JSON data to the Flask server using AJAX? [duplicate] 【发布时间】:2018-02-07 12:45:26 【问题描述】:

我有一些由前端在 JQuery 中生成的数组。

Edit1(基于 Edgar Henriquez 的回答)

my_jq.js:

var a = ['one','two'];
var b = ['three','four'];
var c = ['five'];
var d = ['six','seven','eight']; 
var e = ['nine','ten','eleven'];
var newArray = [];

//jsonify to send to the server
$.ajax('/output',  
    type: "POST",
    contentType: "application/json",
    dataType: "json",
    data: JSON.stringify(postData),
    success: function(data, status)
        console.log(newArray); 
        console.log(status); 
 );

我将选定的值传递给服务器(Flask/python)并让它计算笛卡尔积。然后我需要在 output.html 屏幕中显示输出

@app.route('/output', methods = ['GET','POST'])
def output():
    data1 = request.get_json(force = True)
    a = data1['a']
    b = data1['b']
    c = data1['c']
    d = data1['d']
    e = data1['e']
    newArray = [a,b,c,d,e]
for element in itertools.product(*newArray):
    print(element)
    return jsonify(element)
return render_template('output.html', element = element)

输出.html:

<p> element </p>

编辑2:

使用此代码,/output.html 会生成:

 "Bad Request
 Failed to decode JSON object: Expecting value: line 1 column 1 (char 0)"

检查显示:

 "Failed to load resource: the server responded with a status of 500 (INTERNAL SERVER ERROR)"

为什么它不识别它?

【问题讨论】:

【参考方案1】:

对于您的 jquery 代码,您可以拥有一个 javascript 对象(将对象的属性命名为数组变量,只是为了方便起见)。像这样的:

var a = ['one','two'];
var b = ['three','four'];
var c = ['five'];
var d = ['six','seven','eight']; 
var e = ['nine','ten','eleven'];

var postData = 
  a: a,
  b: b,
  c: c,
  d: d,
  e: e


$.ajax(
    url: "/output",
    type: "POST",
    contentType: "application/json",
    data: JSON.stringify(postData),
    success: function(data)/* do something */
);

回到您的服务器,您可以执行以下操作:

@app.route('/output', methods=['POST'])
def output():
    result = []
    data = request.get_json()
    a = data['a'] #will give you array a
    b = data['b'] #will give you array b
    c = data['c'] #will give you array c
    d = data['d'] #will give you array d
    e = data['e'] #will give you array e
    newArray = [a, b, c, d, e]
    #To test you got the data do a print statement

    print(newArray)

    # The for loop is not necessary if you pass the newArray directly to 
    # your template "output.html".
    #
    #for element in newArray:
    #    result.append(element)
    #
    #like this
    return render_template('output.html', element=newArray)

您可以在output.html 中显示结果,但您认为最适合您,请记住

希望对你有帮助!

【讨论】:

谢谢! ajax 中“成功:”的目的是什么? @FeyziBagirov 请求成功时调用的函数。 read more about $.ajax() 我在运行它时收到“NameError: name 'newArray' is not defined”。似乎它没有将 newArray 识别为变量。可能是什么原因?

以上是关于使用 AJAX 将 JSON 数据传递到 Flask 服务器? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

前端将图片转换为base64位,使用ajax传递到后台,但是图片经过base64转换成字符串后非常长,无法使用ajax

ajax调用时如何将外键传递给json数据?

如何将 Json 对象从 ajax 传递到 spring mvc 控制器?

Ajax - 使用Ajax传递Json数据

通过 AJAX 调用将 JSON 对象列表传递给控制器

通过 AJAX 将两个 JSON 模型对象从 PHP 传递到 JS