Flask：JS和Python之间的通信答案

【问题标题】：Flask: Communication between JS and PythonFlask：JS和Python之间的通信
【发布时间】：2020-12-10 06:24:18
【问题描述】：

我有一个系统，人们可以在其中添加角色并从列表中删除角色（这看起来像：https://s7.gifyu.com/images/idea9b50431c2edc0295.gif）但是想要一种在用户单击“保存”时保存该数据的方法。我在想我可以使用 JS 来获取 ul 的内容并运行 python 函数来保存数据，但我可以弄清楚该怎么做。我试过Passing data from javascript into Flask 和Python Flask calling functions using buttons 但无法正常工作。第二个的问题是我无法将数据传递给函数。

这是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>

我正在尝试将其保存在存储在烧瓶文件（运行烧瓶/网站的 python 文件）中的字典中

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

【问题讨论】：

save 按钮在哪里？你想保存什么信息？你想把它保存在哪里？
@SeyiDaniel 我已将该信息添加到问题中

标签： javascript python html flask

【解决方案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>

烧瓶

@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

【讨论】：

欢迎提问
是的，解释一下就好了。我以前从未见过这个，很想知道它是如何工作的。 @SeyiDaniel
我添加了一些cmets来帮助你理解
感谢您的帮助:)
唯一的问题是，我没有得到想要的结果。相反，我得到一个127.0.0.1 - - [20/Aug/2020 17:59:51] "POST /saverole HTTP/1.1" 405 -

【解决方案2】：

将数据从网页 js 发送回服务器的唯一方法是通过 js 中的 ajax POST/GET 方法

通过定义一个接受烧瓶中数据的路由和一个 js ajax 调用以将该数据发布到该烧瓶路由 onClick（或网页上的任何其他用户更改，由 js 处理）

【讨论】：