首页 > 解决方案 > Flask 可以读取 POST 数据,但不能读取另一个

问题描述

所以我试图将一些数据从我的前端传递到后端。它是用户的昵称和用户的位置。但是,虽然我可以在烧瓶中读取并打印出昵称,但当我想在后端读取位置值时,我总是得到None 。我不太确定为什么会这样,因为我实际上可以在 javascript 控制台中打印位置值,然后再将其传递给后端,一切都很好。我真的很感激任何帮助:)

这是我的相关代码: JS

$(document).on("submit", "#get_nickname", function(e)
    {
    var coords = {};
    //Get location
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(function(loc){
            var latlng = loc.coords.latitude + "," + loc.coords.longitude;
            String(latlng);

            latlngContainer = latlng;
            coords.latlng = latlngContainer;
        });
    }
    console.log(coords);

    e.preventDefault();
    $.ajax({
      type: "POST",
      url: "/add_address",
      data: {
          nickname:$("#nickname").val(),
          location: coords
      },
      success: function()
      {
        set_address_cookie(31);
        session_memory();
        add_address_toggle();
      }
   })
});

PYTHON

@app.route("/add_address", methods=['POST'])
def add_address():

    nickname = request.form.get("nickname")
    location = request.form.get("location")
    print(f"Hi {nickname}, you are here {location}")
    return "", 201

以下是一些图片:

我的 chrome 控制台日志一切正常

烧瓶上显示的错误

标签: javascriptpythonajaxflaskpost

解决方案


位置正在被删除,因为它是一个对象。尝试以 json 格式发送数据,但是您必须修改您的烧瓶应用程序以接受它。

$.ajax({
    type: "POST",
    url: "/add_address",
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify({
        nickname:$("#nickname").val(),
        location: coords
    }),
    success: function()
    {
        set_address_cookie(31);
        session_memory();
        add_address_toggle();
    }

});

编辑:

我刚刚注意到geolocation.getCurrentPosition回调是异步的,这意味着它会在 ajax 已经发生时稍后执行。您必须等待它完成执行才能发布。我不确定你在什么环境下工作,但我重写了你的 JS 试试看它是否适合你。

$(document).on("submit", "#get_nickname", function(e)
{
    e.preventDefault();

    function addAddress(data){
        $.ajax({
            type: "POST",
            url: "/add_address",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(data),
            success: function()
            {
                set_address_cookie(31);
                session_memory();
                add_address_toggle();
            }
        });
    }

    var data = { nickname: $("#nickname").val() }
    var coords = {};

    //Get location
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(function(loc){
            var latlng = loc.coords.latitude + "," + loc.coords.longitude;
            String(latlng);

            latlngContainer = latlng;
            coords.latlng = latlngContainer;
            data.coords = coords;
            addAddress(data); //submit with coords
        }, function(){
            addAddress(data); //submit without coords when failed to get coords
        });
    } else addAddress(data); //submit without coords when not supported

});

推荐阅读