Question

想法是用户按下按钮，Flask应该在页面上添加一些内容。
在我的情况下，python和Flask 不是一个随意的选择，因为Python做了很多后门工作（例如js不能）。
完美的是它应该只是一个页面而没有在另一个页面上重定向。
所以我的问题是：

如何获得用户按下按钮并运行我想要的功能
如何使此功能在页面上添加一些生成的内容而不重新加载。

Answer 1

正如其中一位评论者所说，您缺少与您合作的Web开发堆栈中的一些关键概念。 Lemme试着解释一下。

Flask是一个后端框架/服务器。它接收来自浏览器的请求并生成并发送响应。您的浏览器可以发出请求并将响应加载为新页面。
JavaScript在浏览器中运行（或使用更通用的术语前端）。它可以更改当前页面的外观和行为，而无需重新加载。它可以向后端发出请求，处理收到的结果并对其采取行动。

浏览器向后端发出请求有两种基本方式。加载页面时。当您的Javascript代码发出XHR请求时。

您的前端有三种基本方式来响应用户操作。

运行一些javascript并做一些事情而不做任何请求。例如，突出显示按钮用户将鼠标悬停在其上，自动完成用户从某些预定义列表中键入的内容，切换UI选项卡，隐藏/显示元素等。
向后端发出请求并将结果作为新页面加载。例如，请点击网站上新页面的链接，提交表单，重新加载页面等。这就是10到15年前大多数Web应用程序的工作方式。
运行一些javascript并使用它在后台向后端发出请求。使用javascript处理结果并动态更新页面而无需重新加载。这就是大多数Web应用程序现在的工作方式。

基本上，有两种方法可以做你想要的，旧的方式，你有Flask应用程序生成包含新内容的整个页面并将其发送到浏览器。这将使浏览器重新加载页面。而新的方式，你的Flask应用程序只提供你想要更改的数据和浏览器中的javascript在后台发出XHR请求并使用数据来更新页面。这可以在没有重新加载的情况下发生，这是大多数现代Web应用程序的工作方式。

我希望这能为你解决一些问题。

Answer 2

app.py

from flask import Flask,render_template,request

app = Flask(__name__)

@app.route("/add_item")
def add_item():
    #in reality you are doing something else i imagine
    return "<li>%s</li>"%(request.args.get('name'))

@app.route('/')
def hello_world():
    return render_template('index.html',items=["Item 1","Item 2","Item 3"])


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

模板/ index.html中

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script   src="https://code.jquery.com/jquery-3.2.1.js"></script>
</head>
<body>
<ul id="items_holder">
{% for item in items %}
    <li>{{ item }}</li>
{% endfor %}
</ul>
<button id="do_something">Do Something</button>
</body>
<script src="/static/app.js"></script>
</html>

静态/ app.js

$(function(){
    $("#do_something").click(function(){
        var item_name = prompt("enter item name")
        $.get("/add_item?name="+item_name,function(result_data){
            $('#items_holder').append(result_data)
        })
    })
})

如何运行Flask函数，触发用户的操作并向页面添加内容？

2 个答案:

app.py

模板/ index.html中

静态/ app.js