jquery 如何从 flask 中“ImmutableMultiDict”中获取数据

avwztpqn  于 2023-01-08  发布在  jQuery
关注(0)|答案(5)|浏览(271)

我正在学习如何使用 AJAX 和Flask,因此我要做的是发送ajax请求,然后在python文件中以post请求的形式接收数据
My html file contains this code

var data = {"name":"John Doe","age":"21"};
$.ajax({
  url:'/post/data',
  datatype : "json",
  contentType: "application/json; charset=utf-8",
  data : JSON.stringify(data),
  success : function(result) {
    jQuery("#clash").html(result); 
  },error : function(result){
     console.log(result);
 }
});

我的python文件包含:

@app.route('/post/data',methods=['GET','POST'])
def postdata():
  #do some
  data = str(request.args)
  json_dumps = json.dumps(data)
  return json_dumps

这将在页面上显示以下数据

"ImmutableMultiDict([('{\"name\":\"John Doe\",\"age\":\"21\"}', u'')])"

这就是我的request.query_string的样子
那么我如何得到nameage。如果我哪里错了,请纠正我。提前感谢。

drnojrws

drnojrws1#

你实际上并不需要从ImmutableMultiDict获取数据。在你所拥有的东西中有几个错误阻止你把响应作为json数据拉出来。首先,你必须稍微调整你 AJAX 调用的参数。你应该把调用类型添加为POST。此外,datatype应该拼写为dataType。你的新调用应该是:

var data = {"name":"John Doe","age":"21"};
$.ajax({
    type: 'POST',
    contentType: 'application/json',
    url: '/post/data',
    dataType : 'json',
    data : JSON.stringify(data),
    success : function(result) {
      jQuery("#clash").html(result); 
    },error : function(result){
       console.log(result);
    }
});

数据现在实际上是作为一个post请求发送的,类型为json。在Flask服务器上,我们现在可以读取数据作为子信息,如下所示:

@app.route('/post/data',methods=['GET','POST'])
def postdata():
    jsonData = request.get_json()
    print jsonData['name']
    print jsonData['age']
    return "hello world" #or whatever you want to return

这将成功打印John Doe21
让我知道这是否适合你,或者如果你有任何其他问题!
编辑:您可以从flask向 AJAX 调用返回成功,如下所示:

# include this import at the tomb
from flask import jsonify

@app.route('/post/data',methods=['GET','POST'])
    def postdata():
        ...
        return jsonify(success=True, data=jsonData)
oug3syen

oug3syen3#

我来到这个页面是因为我正在尝试用 AJAX 发送一个表单,我终于找到了一个解决方案。这个解决方案是跳过JSON(希望这对其他搜索相同的人有帮助):

$.ajax({
    type: "POST",
    url: my_url,
    data: $("#formID").serialize(), //form containing name and age
    success: function(result){
        console.log(result);
    }
});

然后,在Flask服务器上:

app.route('/my_url', methods = [POST])
def some_function():
    name = request.form['name']
    age = request.form['age']
    # do what you want with these variables
    return 'You got it right'
xbp102n0

xbp102n04#

我通过将contentType添加为application/JSON来解决这个问题,如下所示

data ={ 
              type:'POST',
              contentType:'application/json',
              otherData: 'foo'
           }

现在您可以访问flask后端中的数据,如下所示:

app.route('/my_url', methods = ["POST"])
def some_function():
    other_data = request.form['otherData']
    # do something

注意:我使用的是普通JavaScript,而不是jQuery

p1iqtdky

p1iqtdky5#

我的工作是:

var data = {"name":"John Doe","age":"21"};
$.ajax({
    type: 'POST',
    contentType: 'application/json',
    url: '/my_url',
    dataType : 'json',
    data : JSON.stringify(data),
    success : function(result) {
      jQuery("#clash").html(result); 
    },error : function(result){
       console.log(result);
    }
});

培养瓶应用程序:不适当的

@app.route('/my_url',methods=['POST,GET'])  # 
def some_function():
    dataList=list(request.form)[0] # output is string ==> '{"name":"John Doe","age":"21"}'
    b=json.loads(dataList) # output is dictionary ==> {"name":"John Doe","age":"21"}
    print(b) #{"name":"John Doe","age":"21"}

    return 'OK'

相关问题