Onclick 写入数据库而不刷新答案

【问题标题】：Onclick write to database whithout refreshingOnclick 写入数据库而不刷新
【发布时间】：2015-05-06 10:20:54
【问题描述】：

我一直在开发 Flask 应用程序。

一切都很顺利，因为我在避免一个问题。写入数据库时，我总是使用帖子（使页面重新加载）。

张贴表格等问题不大。

现在我想要一个“我需要帮助”按钮，它可以在 db 中设置值 true 或 false。

基于此值，我将生成提供帮助的 html。

但是按钮不能使页面刷新。这就是我卡住的地方。

我只是设法让它工作而不写入数据库（并将其存储在本地）。

有什么我想念的明显的事情吗？或者一些 Flask 魔法来完成它。

我正在考虑的解决方案是在离开页面后发布到数据库。虽然还没有得到这个工作。

提前致谢！

【问题讨论】：

标签： javascript jquery python flask

【解决方案1】：

此示例使用Ajax 将一些数据发送到Flask back-end 和jQuery 并接收响应。这很简单，但我标记了在用户单击您的帮助按钮后您希望后端处理的处理的位置。

from flask import Flask, render_template_string, request


app = Flask(__name__)


@app.route('/')
def index():
    return render_template_string('''
        <html>
            <head>
                <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
                <script type="text/javascript">
                    $(document).ready(function() {
                        $('#send_data').on('click', function() {
                            $.ajax({
                                url: "{{ url_for('data_post') }}",
                                method: "POST",
                                data: {
                                    data: $('#data').val()
                                },
                                success: function(data) {
                                    $('#response').html(data);
                                }
                            });
                        });
                    });
                </script>
            </head>
            <body>
                <input type="text" name="" id="data">
                <button id="send_data">Send</button>
                <br />
                <p id="response"></p>
            </body>
        </html>
        ''')


@app.route('/data', methods=['POST'])
def data_post():
    # handle your database access, etc.
    return 'received'


if __name__ == '__main__':
    app.run()

这是一个带有文本框和按钮的简单索引页面。在文本框中输入一些内容，然后单击按钮。您应该在临时表单下方的页面上看到“已收到”，这是来自后端的处理（在此示例中没有任何处理）完成的回声。

【讨论】：

我没有运行你的代码，但这个想法非常清晰和有用。小问题：你为什么要在 url 中说 .data_post？
这只是第二种方法的名称：def post_data():，接受 HTTP POST 数据的方法。
当然可以，但我从不使用点..：p
啊，明白了。点符号用于蓝图：.method_name 引用当前蓝图的方法“method_name”。在这个例子中，最好排除它。好收获！

【解决方案2】：

我目前也在开发 Flask 应用程序，如果您不想重新加载网页，则必须进行 AJAX 调用。这可以通过jQuery.post() 函数轻松完成。此外，您可能需要在 Flask 中设置新路由，以便提供 post 函数将向其发出请求的所需数据。要禁用自动表单提交，您可以使用：

$('form').submit(false);

对于手动发布和从服务器接收数据，您可以使用：

<button ... onclick="submitForm()">Submit</button>

和 submitForm():

function submitForm()
{
    $.post( url, { "data": "form-data" }).done(function (){...});
}

希望这会有所帮助。

【讨论】：