Javascript 单击写入数据库而不刷新_Javascript_Jquery_Python_Flask

Javascript 单击写入数据库而不刷新

javascript jquery python flask

Javascript 单击写入数据库而不刷新,javascript,jquery,python,flask,Javascript,Jquery,Python,Flask,我已经做了一段时间的烧瓶应用程序一切都很顺利，因为我避免了一个问题。在写入数据库时，我总是使用post（这会使页面重新加载）在发布表单等时不是大问题现在我需要一个“我想要帮助”按钮，它可以在数据库中使值为真或假基于这个值，我将生成提供帮助的html 但该按钮无法使页面刷新。这就是我被卡住的地方我只设法让它工作，而没有写入数据库（并将其存储在本地）有什么明显的东西我错过了吗？或者用烧瓶魔法来完成我正在考虑的解决方案是在离开页面后发布到db。但这还没起作用提前谢谢此示例用于向发送一

我已经做了一段时间的烧瓶应用程序

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

在发布表单等时不是大问题

现在我需要一个“我想要帮助”按钮，它可以在数据库中使值为真或假

基于这个值，我将生成提供帮助的html

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

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

有什么明显的东西我错过了吗？或者用烧瓶魔法来完成

我正在考虑的解决方案是在离开页面后发布到db。但这还没起作用

提前谢谢

此示例用于向发送一些数据并接收响应。这很简单，但我标记了在用户单击“帮助”按钮后处理后端处理的位置

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

从烧瓶导入烧瓶，呈现模板字符串，请求
app=烧瓶（名称）
@应用程序路径（“/”）
def index（）：
返回渲染模板字符串（“”）
$（文档）.ready（函数（）{
$（'send#u data'）。在（'click'，function（）上{
$.ajax({
url:“{url\'u for（'data\'u post'）}}”，
方法：“张贴”，
数据：{
数据：$（“#数据”）.val（）
},
成功：功能（数据）{
$（'#response'）.html（数据）；
}
});
});
});
发送



''')
@app.route（'/data'，methods=['POST']）
def data_post（）：
#处理您的数据库访问等。
返回“已收到”
如果uuuu name uuuuuu='\uuuuuuu main\uuuuuuu'：
app.run（）

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

此示例用于向with发送一些数据并接收响应。这很简单，但我标记了在用户单击“帮助”按钮后处理后端处理的位置

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

从烧瓶导入烧瓶，呈现模板字符串，请求
app=烧瓶（名称）
@应用程序路径（“/”）
def index（）：
返回渲染模板字符串（“”）
$（文档）.ready（函数（）{
$（'send#u data'）。在（'click'，function（）上{
$.ajax({
url:“{url\'u for（'data\'u post'）}}”，
方法：“张贴”，
数据：{
数据：$（“#数据”）.val（）
},
成功：功能（数据）{
$（'#response'）.html（数据）；
}
});
});
});
发送



''')
@app.route（'/data'，methods=['POST']）
def data_post（）：
#处理您的数据库访问等。
返回“已收到”
如果uuuu name uuuuuu='\uuuuuuu main\uuuuuuu'：
app.run（）

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

我目前也在开发一个Flask应用程序，如果你不想重新加载网页，你必须进行AJAX调用。这可以通过

jQuery.post（）

函数轻松完成。此外，您可能需要在Flask中设置一个新路由，以便提供post函数将向其发出请求的所需数据。要禁用自动表单提交，您可以使用：

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

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

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

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

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

希望这能有所帮助。

我目前也在开发一个Flask应用程序，如果你不想重新加载网页，你必须打一个AJAX电话。这可以通过

jQuery.post（）

函数轻松完成。此外，您可能需要在Flask中设置一个新路由，以便提供post函数将向其发出请求的所需数据。要禁用自动表单提交，您可以使用：

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

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

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

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

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

希望这能有所帮助。

我没有运行您的代码，但是这个想法非常清楚而且有用。小问题：你为什么会在的url中说.data\u post？这只是第二个方法的名称：

def post\u data（）：

，一个接受HTTP post数据的方法。当然，但我从不使用点..：pAh，明白了。点符号用于蓝图：

。方法\u名称

引用当前蓝图的方法“方法\u名称”。在本例中，最好将其排除在外。抢手货我没有运行你的代码，但是这个想法非常清楚而且有用。小问题：你为什么会在的url中说.data\u post？这只是第二个方法的名称：

def post\u data（）：

，一个接受HTTP post数据的方法。当然，但我从不使用点..：帕