如何將數據從 Flask 發送到 JavaScript？

Question

您好，我是新手，正在 Flask 和 Javascript 中構建應用程序。 我從 Flask 和 JavaScript 發送數據時遇到問題。

我在 routes.py 中有代碼

@app.route('/mapaa',methods=['GET','POST'])
def mapa():
    user_id = current_user.get_id()
    slownik = {}


    if 'event_form' in request.form:
        name = request.form['name_event']
        all_data = Event.query.filter_by(name=name).all()
        for row in all_data:
            date_st_string = str(row.date_start)
            date_end_string = str(row.date_end)
            slownik = {'id':row.id,'date_st':date_st_string,'date_end':date_end_string,'type':row.type,'name':row.name,'len_route':row.len_route,'route':row.route}
        return jsonify(slownik)
    return render_template('mapaa.html', title='Mapa')

我想在jsonify(slownik)發送到我的代碼，但我不想使用render_template執行此操作，因為它會刷新頁面，我需要使用此數據在 map 上顯示它我嘗試return jsonify(slownik)但它返回了新頁面上的數據。 當用戶單擊event_form按鈕到 JavaScript 而不刷新頁面時，如何發送數據？

Answer 1

您可以使用 ajax 發送 post 請求而無需刷新頁面。 注意 - 在此之前包括 jquery

<script src="https://code.jquery.com/jquery-3.1.0.js" ></script>

javascript碼

$("#id_of_btn").click(function () { // make ajax request on btn click
  $.ajax({
    type: "POST",
    url: "/mapaa", // url to the function
    data: {
      name: $("#id_of_input_tag").val(), // value of the form
    },
    success: function (response) {
      console.log(response); // response contains the json
    },
  });
});

確保您不使用表單標簽。

編輯：如果您想通過 forms 發送更多數據，您可以使用

data: $('form').serialize()

這將獲取輸入標簽的名稱屬性並將其添加到 request.data 所以如果你有這個

<input type="text" id="element_id" name="username" > 

您可以使用 name 屬性的值，例如request.data['username']遵循本教程