Question

我一直在研究Flask应用程序。

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

发布表单等时不是一个大问题。

现在我想要一个“我想要帮助”按钮，在数据库中使值为true或false。

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

但按钮无法刷新页面。这是我被卡住的地方。

我只是设法让它工作而不写入db（并将其存储在localy中）。

有没有一件我想念的事情？或者一些完成它的Flask魔术。

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

提前致谢！

Answer 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()

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

Answer 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 (){...});
}

希望这有帮助。

Onclick写入数据库而不刷新

2 个答案: