Fatal编程技术网
  • python/
  • Python 如何运行在用户'；s操作并向页面添加内容？

Python 如何运行在用户'；s操作并向页面添加内容？

python flask

Python 如何运行在用户'；s操作并向页面添加内容？,python,flask,Python,Flask,这个想法是用户按下按钮，烧瓶应该在页面上添加一些内容 在我的例子中，python和Flask不是一个随意的选择，因为python做了很多后门工作（例如js做不到） 完美的是，它应该只是一个页面，而不在另一个页面上重定向 所以我的问题是： 如何获得用户按下按钮并运行我想要的功能的时刻 如何使此函数在不重新加载的情况下在页面上添加一些生成的内容 正如一位评论者所说，您正在使用的web开发堆栈中缺少一些关键概念。让我解释一下 Flask是一个后端框架/服务器。它接收来自浏览器的请求，并生成和发送响应

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

  • 如何获得用户按下按钮并运行我想要的功能的时刻
  • 如何使此函数在不重新加载的情况下在页面上添加一些生成的内容
    • 正如一位评论者所说，您正在使用的web开发堆栈中缺少一些关键概念。让我解释一下

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

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

    • 运行一些javascript，在不发出任何请求的情况下做一些事情。例如，突出显示用户将鼠标悬停在其上方的按钮、自动完成用户从预定义列表中键入的内容、切换UI选项卡、隐藏/显示元素等
    • 向后端发出请求，并将结果作为新页面加载。例如，跟踪网站上新页面的链接、提交表单、重新加载页面等。这就是10-15年前大多数web应用程序的工作方式
    • 运行一些javascript并使用它在后台向后端发出请求。使用javascript处理结果并动态更新页面，而无需重新加载。这就是现在大多数web应用程序的工作方式
    基本上，有两种方法可以满足您的需求，一种是旧方法，即让您的Flask应用程序使用新内容生成整个页面并将其发送到浏览器。这将使浏览器重新加载页面。新的方式是，你的Flask应用程序只提供你想要更改的数据，浏览器中的javascript在后台发出XHR请求，并使用数据更新页面。这可以在不重新加载的情况下实现，这是大多数现代web应用程序的工作方式

    我希望这能帮你澄清一点。

    app.py
    这与烧瓶无关。。。您想要的功能是javascript…：/好的，但正如我所说的，之所以选择python是因为我使用python包，它不能被js替代。它们彼此都不是替代品。。。它们的工作方式不同，flask管理您的后端。。。flask无法在不重新加载页面的情况下更改内容。。。您缺少解决问题所需的web技术堆栈知识的一些关键理解。好的，我将尝试找出如何使用js来实现这一点。非常感谢。非常感谢。首先回答问题。但是有必要使用jqvery吗？ 
    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()

    <!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>

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