0

我正在 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)
4

0 回答 0