ajax - 使用 Flask、Bootstrap 和 Ajax 更新数据库

Question

我想更新我的数据库（添加意见）并自动在我的网站上显示它们而不刷新。我使用烧瓶，引导程序，我想编写脚本以 AJAX 发送数据。

所以，当我有关于书的详细信息时，这是我的网站（detail_book.html）：

{% extends "bootstrap/base.html" %}
{% block content %}
*Here I have jinja2 to display content sent by render_template, not necessery to add here*
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">
Add opinion
</button>

<!-- MODAL FORM-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Your opinion about {{ book.title }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
    </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" href="#" data-role="add">Send opinion</button>
      </div>
    </div>
  </div>
</div>
<!-- END MODAL FORM -->
{% endblock %}

因此，单击按钮后，将显示模态窗口。填写完消息并单击另一个按钮后，我想将书的 ID、作者 ID 和意见发送到数据库。我在数据库中的表如下所示：

class User(UserMixin, db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(40), index=True, unique=True)
    email = db.Column(db.String(120), index=True, unique=True)
    password_hash = db.Column(db.String(128))
    posts = db.relationship('Opinion', backref='author', lazy='dynamic')

class Opinion(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    body = db.Column(db.String(140))
    timestamp = db.Column(db.DateTime, index=True, default=datetime.utcnow)
    user_id = db.Column(db.Integer, db.ForeignKey('user.id'))
    book_id = db.Column(db.Integer, db.ForeignKey('book.id'))

class Book(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(255), index=True)
    description = db.Column(db.String(255))
    author = db.Column(db.String(255))
    pages = db.Column(db.Integer)
    opinions = db.relationship('Opinion', lazy='dynamic')

在我的 *routes.py 我有方法：

@app.route('/detail_book/<title>')
def detail_book(title):
    book = Book.query.filter_by(title=title).first_or_404()
    result = db.session.query(Book.id, Opinion.body).filter(Opinion.book_id==book.id).filter(and_(Book.title == title)).all()
    return render_template('detail_book.html', book=book, result=result)

总而言之，我想从我的模态中获取数据，将其发送到数据库（意见）中的 1 个表，并在我的端点中显示这个意见。我从未使用过 AJAX，我尝试了来自 web 的不同脚本，但最后我放弃了。有人可以帮我解决这个问题吗？

标签： ajaxdatabaseflask