关于#falsk,ajax#的数据传递问题(前端传后端)，如何解决？(标签-flask)

请教一下 flask 中ajax 获取数据传递到后台,后台怎么接受数据,不知道哪里的问题,数据一直获取不了.

通过ajax 获取data中city数据代码

img

后台接收代码

img

运行的效果

img

ajax请求的网址另外用一个路由，共用区分下请求类型是get或者post，get返回模板，否则返回post请求的值，示例如下

from flask import Flask, request,render_template
import json

app = Flask(__name__)

@app.route("/change_data", methods=['GET','POST'])
def change_data():
    if request.method=='GET':##直接访问为get请求，返回模板
        return render_template("change_data.html")

    ##ajax post请求
    city = request.get_json().get('city')
    city_name = json.dumps({"city":city})
    return city_name

app.run('0.0.0.0', port=8001,debug=True)

模板 templates\change_data.html

<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
    var data = { "city": "重庆" };
    $.ajax({
        url: '/change_data',
        type: 'POST',
        data: JSON.stringify(data),
        contentType: 'application/json',
        dataType: 'json',
        success: function (data) {
            alert(data.city);
        },
        error: function () {
            alert('服务器超时，请重试!');
        }
    });

</script>

参考GPT和自己的思路：修改后的代码如下：

前端代码：

var data = {"city":"重庆"};
$.ajax({
    url: '/change_data',
    type: 'POST',
    data: JSON.stringify(data),
    contentType: 'application/json',
    dataType: 'json',
    success: function(data){
        alert(data.city);
    },
    error: function(){
        alert('服务器超时，请重试!');
    }
});

后端代码：

@app.route("/change_data", methods=['POST'])
def change_data():
    city = request.get_json().get('city')
    city_name = jsonify({"city":city})
    return city_name

这样应该就能正确地获取到前端传递的数据并返回给前端了。注意，Flask中需要安装"flask-json"库，以支持JSON格式的数据传递和处理。

参考GPT的回答和自己 的思路，您在后端代码中获取数据的方式是通过request.form.get('city')，但是在ajax中使用的是data，因此需要将data中的数据放在form中传递。可以使用FormData对象来实现，代码如下：

var data = new FormData();
data.append("city", "重庆");

$.ajax({
  url: '/change_data',
  data: data,
  type: 'POST',
  dataType: 'json',
  success: function(data) {
    alert(data.city);
  },
  error: function() {
    alert('服务起时，请重试!');
  }
});

最后，在后端代码中，应该将获取到的数据转化为字典类型，然后使用jsonify返回，代码如下：

from flask import jsonify

@app.route("/change_data", methods=['GET', 'POST'])
def change_data():
    city = request.form.get('city')
    city_dict = {"city": city}
    return jsonify(city_dict)

这样就可以成功获取并返回前端传递的数据了。
回答不易，还请采纳！！！

以下答案由GPT-3.5大模型与博主波罗歌共同编写：
在flask中接收ajax传递的数据可以通过request.get_json()进行获取，具体如下：

前端代码：

$.ajax({
    type: "POST",
    url: "/test",
    data: JSON.stringify({'city': '北京'}),
    contentType: "application/json;charset=utf-8",
    success: function(result){
        console.log(result);
    },
    error: function(result){
        console.log(result);
    }
});

后端代码：

@app.route('/test', methods=['POST'])
def test():
    data = request.get_json()
    city = data.get('city')
    return city

其中，因为前端传递的是json格式的数据，需要设置contentType为"application/json;charset=utf-8"，后端获取数据可以通过request.get_json()获取。注意在获取数据时需要先将请求数据转换为字典类型，可以使用get方法获取对应的数据。

另外，如果接收到的数据中有中文，需要对请求数据进行编码和解码，这可以通过urlencode和unquote方法进行实现，具体如下：

前端代码：

data: 'city=' + encodeURIComponent('北京'),

后端代码：

import urllib.parse

@app.route('/test', methods=['POST'])
def test():
    data = urllib.parse.unquote(request.data.decode('utf-8'))
    city = data.split('=')[1]
    return city

注意在解析数据前需要使用unquote方法对数据进行解码，并且在获取数据时需要通过split方法进行分割。
如果我的回答解决了您的问题，请采纳！

不知道你这个问题是否已经解决, 如果还没有解决的话:

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^