Flask：JS與Python之間的通信

Question

我有一個系統，人們可以在其中添加角色並從列表中刪除角色（這看起來像： https://s7.gifyu.com/images/idea9b50431c2edc0295.gif ）但想要一種方法來保存用戶時的數據點擊“保存”。 我在想我可以使用 JS 來獲取 ul 的內容並運行 python function 來保存數據，但我可以弄清楚該怎么做。 我已經嘗試將 javascript 中的數據傳遞到 Flask和Python Z9784E91C7B2657917226BC82 中，但無法使用調用按鈕來獲取 Z9784E91C7B2657917226BC82。 第二個問題是我無法將數據傳遞到 function。

這是ul的代碼：

<ul class="role_box_roles" id="rbroles">
    {% for role in modroles %}
    <li class="role_box_role" style="border-color: rgb(255, 255, 255);">
        <button class="role_remove_button" onclick="remove_option('{{role}}', this)" type="button" style="background-color: rgb(255, 255, 255);">-</button>
        <span>{{role}}</span>
                        </li>
    {% endfor %}
    <li id="plusbutton"><button class="role_add" type="button" onclick="show_options()">+</button></li>
</ul>

我正在嘗試保存角色名稱 ({{role}})。

保存按鈕在 ul 下方

<div id="save_changes_button" class="save_changes_button" onclick="">Save</div>

我正在嘗試將其保存在存儲在 flask 文件（正在運行燒瓶/網站的 python 文件）中的字典中

如果需要，我可以提供額外的信息。

Answer 1

為標簽 ( 和 ) 保存按鈕創建 ID

<span id="myspan">{{role}}</span>
<a id="save_changes_button" class="save_changes_button">Save</a>

JS 監聽點擊save_changes_button ，一旦發生這種情況

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"</script>
<script>
$(document).ready(function() {
    $('#save_changes_button').click(function (event) {
    event.preventDefault();
    $('#save_changes_button').prop("disabled", true);
    $.ajax({
         data : { my_role : $('#myspan').text() }, //grab text between span tags
         type : 'POST',
         url : '/saverole', //post grabbed text to flask endpoint for saving role
         success: function (data) { console.log('Sent Successfully') },
         error: function (e) { console.log('Submission failed...') }
    });
});
})
</script>

FLASK

@app.route('/saverole', methods=['POST', 'GET'])
def saverole():
    s_role = request.form['my_role'] #parse received content to varaible
    role_dict = {'role': s_role} #construct a dictionary with variable 
    return ('', 205) #or whatever you wish to return

Answer 2

將數據從網頁 js 發送回服務器的唯一方法是通過 js 中的 ajax POST/GET 方法

by defining a route which accepts the data in flask and a js ajax call to POST that data to that flask route onClick (or any other user changes on webpage, handled by js)