如何通過 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)