如何通过 AJAX 调用访问传入 Flask 的数据？答案

【问题标题】：How to access data passed into Flask with an AJAX call?如何通过 AJAX 调用访问传入 Flask 的数据？
【发布时间】：2018-12-02 22:11:51
【问题描述】：

我正在开发一个项目，该项目使用烧瓶和 sql 数据库显示酒店和 airbnb 数据。我们正在尝试创建一个“收藏按钮”，以便用户可以收藏/取消收藏列表。我有一个对 Flask 端点的 AJAX 调用，它将对“收藏夹”表进行相应的 SQL 查询。我的问题是，我似乎无法访问传递给 Flask 的数据。

这是我在客户端的 AJAX 调用：

function unfavoriteClicked(uid, itemid, type){
    $.ajax({
        type: "POST",
        url: "/unfavorite",
        data:{uid:uid, itemid:itemid, type:type},
        contentType: 'application/json;charset=UTF-8',
        success: function(data) {    
            console.log(data);
        },
        error: function(jqXHR) {
            alert("error: " + jqXHR.status);
        }
    });
}

这是我的 Flask 代码：

@app.route('/unfavorite', methods=["GET","POST"])
def unfavorite():
    if request.method == "POST":
      return request.form
return "this shouldn't happen"

请注意，由于我发现我没有在 Flask 中正确访问数据，因此我已经删除了 SQL 逻辑和其他内容。

我确信 AJAX 请求会通过，因为当我返回类似“hello”的内容时，它会显示在控制台日志中。但是，当我尝试访问要传入的数据字典时，它会返回“500 内部服务器错误”或其他类型的错误，具体取决于我要访问的内容。我试图通过查看其他 stackoverflow 帖子（如 request.form['data']、request.data、request.args 等）来访问一堆不同的东西，但似乎没有任何东西可以让我访问数据。但是，它似乎允许我访问“request.method”。

我想知道是否有一些我在这里遗漏的基本内容是我无法将数据传递给 Flask 的原因？或对执行此“收藏”按钮的任何其他建议表示赞赏。谢谢！

【问题讨论】：

标签： javascript python ajax flask

【解决方案1】：

因此，考虑到您要解决的主要问题是使用 Ajax 访问由您的网页传递的数据。我有一个可能适用于您的解决方案。

所以我将分两部分解释如何解决这个问题。

1) 将数据传递给您的 python 控制器/函数以进一步处理数据。

   $.post("url_to_which_you_want_to_pass_data", {variable_name_to_access_in_python:any_value/variable_from_front_end},
         function(response, status){
                       call_back_function_code  
         });

2) 在python flask中访问已经从网页传递过来的数据

   @app.route('/unfavorite', methods=["GET","POST"])
   def unfavourite:
      if request.method == "POST":
         any_variable_name = request.form.get("variable_name_to_access_in_python","")
         print(any_variable_name) #If you want to print
         return any_variable_name #If you want to see any_variable_name on web
      return None

希望对您有所帮助！干杯:)

【讨论】：

【解决方案2】：

我不知道这是否是最佳选择，但它对我有用。

JavaScript：

    var data = [1, 2, 3, 4]
    var frontend_data = {'list':data}

    $.ajax({
        url: "/unfavorite",
        contentType: 'application/json',
        type: "POST",
        data: JSON.stringify(frontend_data),
        dataType: 'json',
        success: function(result) {
          console.log("Result:");
          console.log(result);
        }
    });

烧瓶：

    @app.post('/unfavorite')
    def unfavorite():
        data = request.get_json()
        print(data['data'])  #[1, 2, 3, 4]
        return jsonify(data)

【讨论】：