FLASK - AJAX 从数据库中获取数据

Question

我正在制作一个“在这里写任何东西”的网页，用户可以在其中在文本框中写任何东西然后发布它，每个人都可以看到它。它工作得很好，直到我发现当任何用户写入和提交时，所有其他用户都必须刷新页面才能从数据库中获取新数据。所以解决这个问题的方法是每隔一段时间连续调用 ajax。这将检查表中是否有新条目。如果是，那么它将在不刷新整个页面的情况下将其呈现为 html。现在我是纯粹的 ajax 菜鸟，经过数小时的研究，我无法找到如何去做。

这里是html代码

    <div id="textArea">
        <form action="http://127.0.0.1:3000" method="POST">
          <br>
          <textarea minlength="3" name="comment" placeholder="Enter Text Here.." required></textarea>
          <input id="postButton" type="submit" name="" value="POST">
        </form>
      </div>
    </div>

    <div class="show">
      {% for item in data %}
        <div id="auto" class="disPost">{{item[0]}}</div>
      {% endfor %}
    </div>

这里的文本区域是一个表单，它通过烧瓶服务器将文本提交到数据库。 另外，用户写的所有cmets都显示在“div.show”中

现在flask代码是这样的

@app.route('/', methods = ['POST', 'GET'])
def home():
    if request.method == 'POST':

        post = request.form["comment"]

        myquery = "select p_id from posts order by p_id desc limit 1"
        mycursor.execute(myquery)

        new_p_id = mycursor.fetchone()[0] + 1

        myquery = "select exists(select * from posts where p_des=%s)"
        rec_tup = (post,)
        mycursor.execute(myquery, rec_tup)
        if mycursor.fetchone()[0]==0:
            myquery = "insert into posts values(%s, %s)"
            rec_tup = (new_p_id, post)
            mycursor.execute(myquery, rec_tup)
            mydb.commit()


    mycursor.execute("select distinct p_des from posts order by p_id desc")
    data = mycursor.fetchall()    
    return render_template("homepage.html", data=data)

“mydb”是连接器，“mycursor”是连接器的光标

现在我被困在如何调用 AJAX 函数的问题上。我不能写超出这个..

      $(document).ready(function() {
        setInterval(function() {          
          $.ajax({
            url: '',
            type: 'GET',
            data: //something must be here,

            success: function(data) {

              //here "div" must be added to the "show" class - that is comment of other users

            }
          })

        }, 3000);

      });

我知道我必须做这样的事情，但实际上无法解决它。

我知道这不是一个好问题，我必须先看教程。但相信我，我拥有了一切。我根本无法解决这个问题。 谢谢你看到这个:)

Answer 1

我在我的最新项目中做了这个，你也可以试试。但请确保只刷新您希望数据显示的 div 元素，而不是所有页面。

      $(document).ready(function() {
            function getData(){
 $.ajax({
            url: '',
            type: 'GET',
            data: //something must be here,

            success: function(data) {

              //here "div" must be added to the "show" class - that is comment of other users

            }
          });
}
    getData();
setInterval(function() {getData()},2000);
          });