将 sqlalchemy 查询中的值添加到 ajax 列表中

时间:2021-05-05 21:51:16

标签: python jquery ajax flask flask-sqlalchemy

我在烧瓶中有简单的数据库

class Task(db.Model):
    __tablename__ = 'task'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    task = db.Column(db.Text)

tasks = [
    Task(task="1+2+3"),
    Task(task="2+3+4"),
    Task(task="2+3+4+5"),
    Task(task="2+3+4+5+6"),
    Task(task="2+3+4+5+7"),
    Task(task="2+3+4+5+8")
]

for tsk in tasks:
    db.session.add(tsk)
    db.session.commit()

@app.route('/')
def index():
    query_from_task = Task.query.all()
    return render_template('index.html',
                           query_from_task=query_from_task)
list_of_ids =[]
@app.route('/like', methods=['POST'])
def like():

    ddd = True
    print(ddd)
    return jsonify({'like': ddd})

我的目标是通过单击按钮将任务中的 id 添加到列表中。我知道如何在不使用 Flask 的情况下制作它,但这不是很方便。我尝试使用 ajax 来做到这一点:

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
    crossorigin="anonymous"></script>

<script>
$(document).ready(function () {
    $("#button_1").click(function (e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "/like",
            success: function (result) {
                console.log(result["like"]);
                if (result["like"]) {
                    console.log("if like");
                    $("#button_1").addClass("is-danger");
                    $("#button_1").removeClass("is-success");
                }
                else {
                    console.log("if not like");
                    $("#button_1").addClass("is-success");
                    $("#button_1").removeClass("is-danger");
                }
            },
            error: function (result) {
                console.log(result);
            }
        });
    });
});
</script>


<title>Hello, world!</title>
{%- for k in query_from_task %}
<div class="space">
    {{k.task }}
    <button id="button_1" class="button {% if ddd %}is-danger{% else %}is-success{% endif %}" value="1">Info</button>
</div>

{%- endfor %}

问题是只有一个按钮处于活动状态。我应该如何解决我的问题?

0 个答案:

没有答案
相关问题