首页 > 解决方案 > Flask:在 POST 请求上触发 AJAX 调用

问题描述

我有这个烧瓶应用程序,其中一个 JSON 请求被发布到 route("/webhook") 并存储在数据库中。我有另一个路线和页面来显示数据库的内容,并且需要在“/webhook”上的 POST 之后更新(可能使用 AJAX)。当有 POST 到“/webhook”时,如何触发 AJAX 调用,以便更新路由(“/”)上的显示页面。

app.py


app = Flask(__name__)
app.config['SECRET_KEY'] = 'blah blah blah'
app.config['SQLALCHEMY_DATABASE_URI'] = "sqlite:///site.db"
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

db = SQLAlchemy(app)

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(20), unique=False, nullable=True)
    userinfo = db.Column(db.Text, unique=False, nullable=True)

    def __repr__(self):
        return f"<User: {self.id}"

@app.route('/webhook',methods=['POST'])
def webhook():
    data = request.get_json()
    new_user = User(username=data['username'], userinfo=data['userinfo'])
    db.session.add(new_user)
    db.session.commit()
    return jsonify({'username':new_user.username, 'userinfo':new_user.userinfo})


@app.route('/', methods=['GET','POST'])
def display():
    users = User.query.all()
    return render_template('show.html',users=users)

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

show.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Displayer</title>
</head>
<body>
    <h3>Users</h3>
    <button id="refresh">Refresh</button>
    <ul>
        {% for user in users %}
        <li>
            {{ user.username }}
        </li>
        <span> {{ user.userinfo }}</span>
        {% endfor %}
    </ul>

    <span id='new_user'></span>
</body>
</html>

我的 AJAX 调用应该是什么以及如何更新显示页面以加载我的数据库中的所有内容。

标签: javascriptajaxflask

解决方案


推荐阅读