Python 如何在无需渲染模板的情况下在flask中实现按钮？
我对Python&Flask非常陌生，从rn开始，我正在尝试建立一个网站，只需按下一个按钮就可以生成随机颜色，但其想法是，您也可以将这些随机颜色保存在您的个人资料中，然后再对其进行管理、删除、移动等 我现在面临的问题是，在我的随机页面上，我似乎不知道如何实现保存按钮，而不呈现整个页面，再次随机颜色，从而将错误的颜色保存到数据库中。以下是我目前掌握的情况： app.py app.htmlPython 如何在无需渲染模板的情况下在flask中实现按钮？,python,flask,jinja2,Python,Flask,Jinja2,我对Python&Flask非常陌生，从rn开始，我正在尝试建立一个网站，只需按下一个按钮就可以生成随机颜色，但其想法是，您也可以将这些随机颜色保存在您的个人资料中，然后再对其进行管理、删除、移动等 我现在面临的问题是，在我的随机页面上，我似乎不知道如何实现保存按钮，而不呈现整个页面，再次随机颜色，从而将错误的颜色保存到数据库中。以下是我目前掌握的情况： app.py app.html 我有点理解我已经编写的代码中的缺陷，以及它再次呈现模板的原因，但我只需要一个提示或查看位置，这样在if语句之后
我有点理解我已经编写的代码中的缺陷，以及它再次呈现模板的原因，但我只需要一个提示或查看位置，这样在if语句之后，它就不会刷新页面或进一步了。任何关于如何更好地实施这一点的建议、意见和提示，我们都将不胜感激 这比你想象的要复杂得多。您将需要使用某种异步更新。在这种情况下，不用学习React等，使用JQuery可能更容易。基本上，您希望截取表单提交以保存最喜爱的颜色便笺，我在英国，因此在下面的示例中我的拼写可能不一致，抱歉，然后只更改DOM中的特定元素 下面有很多代码，但它提供了一个自包含的示例—只需运行脚本并转到127.0.0.1:5000即可。主要变化： 我已经切换到Alchemy ORM对象关系映射器。这部分是因为我更容易建立一个简单的示例，但通常在应用程序开发中也更容易。因此，我创建了两个类来为您创建数据库表。 我已经实现了两个使用AJAX的JavaScript函数。一个附加到按钮单击，另一个截取表单提交。 我已将烧瓶路由拆分，以便可以分别处理不同的事件 基本上： 如果我们不知道用户最喜欢的颜色，我们只会给出一个白色背景。 如果他们随机选择一种新颜色，我们将只更新背景颜色。我们还将更新表单中的隐藏字段，以保存他们的首选项，以防他们希望保留该字段。 如果他们单击“收藏夹”，我们会将其写入数据库。如果在此点之后关闭页面并再次打开，您将注意到我们加载了他们以前的收藏夹 不要在实际代码中使用render\u template\u字符串，它只允许我将模板放入单个脚本中 这仅用于说明目的。目的是在一般设置上连接点；它缺少表单验证等内容
还有很多，还有很多可以实现，但已经太长了。希望您可以运行它并逐个完成各个点。这比您想象的要复杂得多。您将需要使用某种异步更新。在这种情况下，不用学习React等，使用JQuery可能更容易。基本上，您希望截取表单提交以保存最喜爱的颜色便笺，我在英国，因此在下面的示例中我的拼写可能不一致，抱歉，然后只更改DOM中的特定元素 下面有很多代码，但它提供了一个自包含的示例—只需运行脚本并转到127.0.0.1:5000即可。主要变化： 我已经切换到Alchemy ORM对象关系映射器。这部分是因为我更容易建立一个简单的示例，但通常在应用程序开发中也更容易。因此，我创建了两个类来为您创建数据库表。 我已经实现了两个使用AJAX的JavaScript函数。一个附加到按钮单击，另一个截取表单提交。 我已将烧瓶路由拆分，以便可以分别处理不同的事件 基本上： 如果我们不知道用户最喜欢的颜色，我们只会给出一个白色背景。 如果他们随机选择一种新颜色，我们将只更新背景颜色。我们还将更新表单中的隐藏字段，以保存他们的首选项，以防他们希望保留该字段。 如果他们单击“收藏夹”，我们会将其写入数据库。如果在此点之后关闭页面并再次打开，您将注意到我们加载了他们以前的收藏夹 不要在实际代码中使用render\u template\u字符串，它只允许我将模板放入单个脚本中 这仅用于说明目的。目的是在一般设置上连接点；它缺少表单验证等内容 还有很多，还有很多可以实现，但已经太长了。希望你能运行它，一个接一个地完成各个点
@app.route("/l_randomize", methods=["GET", "POST"])
def l_randomize():
if request.method == "GET":
return render_template("l_randomize.html")
else:
color = '#{:02x}{:02x}{:02x}'.format(*random.sample(range(256), 3))
if 'favourite' in request.form:
db.execute("INSERT INTO fav (user_id, color) VALUES (:user_id, :color)", user_id=session["user_id"], color=color)
return render_template("l_randomized.html",color=color)
{%block body%}
<div class="container">
<h3>Your color is</h3>
<div id="l_randomized" style="background-color: {{ color }};">
<form method="post" action="/l_randomize">
<input type="submit" name = "randomize" value="Randomize" >
<input type="submit" name = "favourite" value="Favourite" >
</form>
</div>
</div>
{%endblock%}
from flask import Flask, render_template_string, session, request
from flask_sqlalchemy import SQLAlchemy
import random
# =============================================================================
# BASIC APP INIT
# =============================================================================
db = SQLAlchemy()
app = Flask('__main__')
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db'
app.config['SECRET_KEY'] = 'change_me'
db.init_app(app)
# =============================================================================
# DATABASE MODELS
# =============================================================================
class Users(db.Model):
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String)
class Fav(db.Model):
id = db.Column(db.Integer, primary_key=True)
user_id = db.Column(db.Integer, db.ForeignKey('users.id'))
color = db.Column(db.String)
with app.app_context():
db.create_all()
user = Users(username='testing') # Create a fake user
db.session.add(user)
db.session.commit()
# =============================================================================
# TEMPLATE
# =============================================================================
l_randomize_html = """
{%block body%}
<div class="container">
<h3>Your color is</h3>
<div id="l_randomized" style="background-color: {{ color }};">
<button onclick="changeColor()">Change</button>
<form method="post" action="{{ url_for('l_save_favourite') }}" id="favColorForm">
<input type="hidden" name="currentColor" id="currentColor" value="{{ color }}">
<input type="submit" name="favourite" value="Favourite" >
</form>
<div id="colorSaveResp"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function changeColor() {
$.ajax({
type: 'POST',
url: "{{ url_for('change_color') }}",
success: function(color) {
$("#currentColor").val(color);
$("#l_randomized").css("backgroundColor", color);
}
});
}
</script>
<script>
$("#favColorForm").submit(function(e) {
e.preventDefault();
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(),
context: form,
success: function(resp) {
$("#dynamic_div").html(resp);
}
});
});
</script>
{%endblock%}
"""
# =============================================================================
# ROUTES
# =============================================================================
@app.route('/', methods=['GET'])
def l_randomize():
session['user_id'] = 1 # Add to the session
# See whether we have a favourite colour
favourite = Fav.query.filter_by(user_id=session['user_id']).first()
if favourite:
color = favourite.color
else:
# They don't, give a default
color = '#FFF'
return render_template_string(l_randomize_html, color=color)
@app.route('/change_color', methods=['POST'])
def change_color():
return '#{:02x}{:02x}{:02x}'.format(*random.sample(range(256), 3))
@app.route('/save_color', methods=['POST'])
def l_save_favourite():
data = request.form.to_dict()
favourite = Fav.query.filter_by(user_id=session['user_id']).first()
if not favourite:
# We don't know this user's favourite colour yet, add it
favourite = Fav(user_id=session['user_id'],
color=data['currentColor'])
db.session.add(favourite)
db.session.commit()
else:
# We'll update their favourite
favourite.color = data['currentColor']
db.session.commit()
return "Saved"
if __name__ == '__main__':
app.run(debug=True)