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

Question

我正在开发一个使用flask 和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);
        }
    });
}

这是我的烧瓶代码：

@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 的原因？ 或者任何其他有关执行此“最喜欢”按钮的建议表示赞赏。 谢谢！

Answer 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

希望能帮助到你！ 干杯:)

Answer 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)