Question

我正在Flask中进行聊天应用程序练习，我需要聊天页面上的HTML div自动检索新的聊天消息，而无需简单地刷新整个页面。

根据我的发现，建议经常读取服务器端创建的JSON文件，并使用AJAX和JQUERY更新div的文本。但是，我的代码似乎没有自动发出任何GET请求。在chat.html：

<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type=text/javascript>
  var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>
<script type="text/javascript">
setInterval(
    function()
    {
        $.getJSON(
            $SCRIPT_ROOT+'/_chat_update',
            {
                ChatId: $({{ chatid }}).val()
            },
            function(data)
            {
                $("#chat-main").text(data.updated);
            });

    },
    500);
</script>
<div id="chat-main">
{% for line in chatLines %}
<p>{{ line.sent_by }}: {{ line.line_text }}</p>
{% else %}
<em>there's nothing here...</em>
{% endfor %}
</div>
...

和服务器端

@app.route('/c/<chatid>', methods=['POST', 'GET'])
def chat(chatid):
    c = chatid
    thisChat = Chat.query.get(chatid)
    thisUser = User.query.filter_by(user_email=session['signed-in-user']).first()
    chatLines = Line.query.filter_by(chat_line=thisChat).all()
    if request.method == 'POST':
        newLine = Line(published_date=datetime.datetime.utcnow(), chat_line=thisChat, line_author=thisUser, line_text=request.form['newline-input'])
        db.session.add(newLine)
        db.session.commit()
        return redirect(url_for('chat', chatid=c))
    return render_template('chat.html', chatLines=chatLines, chatid=c)

@app.route('/_chat_update')
def chat_update():
    ChatId = request.args.get('ChatId', 0, type=int)
    thisChat = Chat.query.get(ChatId)
    newChatLines=Line.query.filter_by(chat_line=thisChat).all()
    return jsonify(updated=newChatLines)

我预计会发生的事情是，每500毫秒，/_chat_update处的JSON将被抓取，HTML div将随结果一起更新 - 在后台网站中这应该只有在JSON不同于当前版本，但那是另一次。现在，我想知道是否1.我在正确的轨道上，我可能在这里出错了，或2.如果有更好的方法来获得这样的数据库添加。非常感谢你的帮助。

修改

有一个错误每秒出现两次，所以它必须与我上面尝试的呼叫有关。它是：

Uncaught TypeError: Cannot call method 'toLowerCase' of undefined  jquery.min.js:1
st.fn.extend.val                                                   jquery.min.js:1
(anonymous function)

每当新数据发布到我的Flask SQLAlchemy应用程序时，我应该如何更新div？

0 个答案: