Question

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

因此，当我掌握有关book（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上的不同脚本，但最终我放弃了。有人可以帮我解决这个问题吗？

使用Flask，Bootstrap和Ajax更新数据库

0 个答案: